javascript - 设置一个 typescript 库以在 Nodejs、浏览器和其他 Typescript 项目中使用

Question

我正在编写一个需要在nodejs和浏览器中运行的库(通过脚本标签导入)。
我想使用 typescript 来编写它，因为它很方便，我也想使用 webpack，因为在某些时候我可能有其他内容或样式与之关联。
到目前为止，我已经成功地使该库可用于 Node 和浏览器，但不知何故，我不能简单地将其导入到另一个 typescript 项目中并使用它是 typescript 库的事实。

这就是我的 tsconfig.json 的外观:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es6",
    "outDir": "ts/",
    "strict": true
  }
}

这是我的webpack.config.js:

const path = require('path');

// PLATFORMS
var variants = [
  {
    target: "web",
    filename: "index.browser.js"
  },
  {
    target: "node",
    filename: "index.node.js"
  },
];

// CONFIG
var configGenerator = function (target, filename) {
  return {
    entry: './src/index.ts',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ]
    },
    target: target, // "web" is default
    output: {
      library: "myWebpackTypescriptLib",
      libraryTarget: "umd",
      filename: filename,
      path: path.resolve(__dirname, 'dist')
    }
  };
};

// MAP PLATFORMS WITH CONFIGS
module.exports = variants.map(function(variant){
  return configGenerator(variant.target, variant.filename)
})

从另一个 typescript 项目中，我尝试像这样导入它:

import myWebpackTypescriptLib from "myWebpackTypescriptLib";

但是通过此导入，在我的文本编辑器中，我将无法访问 typescript 定义，并且在运行时我收到以下错误:ReferenceError:require is not Define。

我还尝试了以下方法，希望能有更好的结果:

import * as myWebpackTypescriptLib from "myWebpackTypescriptLib/src/index"
import * as myWebpackTypescriptLib from "myWebpackTypescriptLib/dist/ts/index.d"

有了这些，我成功获得了 typescript 定义，但没有获得运行代码。

我在编译器中尝试了模块和目标的各种配置，但不知何故，当前的配置给了我最好的结果。我正在尝试做的事情中至少有两到三件事有效。
我已经遵循了许多不同的教程来了解如何实现类似的事情，但我从来没有让这三个元素发挥作用。我一定还缺少一些东西。
有什么想法吗？

编辑:
这是我的目录结构的样子:

所有代码都位于“/src/”目录中，webpack在“/dist/”中为浏览器和 Node 创建版本。
文件/src/index.ts 从附加、插件、实用程序中的其他文件导入代码，如下所示:

// UTILITIES
export * from "./utilities/someUtility";

// ADDITIONALS
export { someModule } from "./additionals/someModule";

let test = 10;
let echo = (a:any) => {
  return a;
}

export default test;
export { echo };

所有导入和导出都已正确设置，因为 webpack 为浏览器和 Node 渲染了所有内容。

Answer 1

所以我终于成功地让它发挥作用。
我在库的 package.json 中缺少正确的类型声明，这就是它现在的样子，并且它可以工作:)

{
  "name": "myWebpackTypescriptLib",
  "version": "0.0.1",
  "description": "A webpack typescript library, usable in browser, node and other typescript projects.",
  "main": "dist/index.node.js",
  "types": "dist/ts/index.d.ts", // <---- this here was not properly set, it gives access to the typescript definitions when importing from other typescripts files
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development --progress --config webpack.config.js",
    "prod": "webpack --mode=production --progress --config webpack.config.js"
  },
  ...
}