Question

我正在编写一个需要在nodejs和浏览器中运行的库（通过script标签导入）。
我想用打字稿来写它，因为它很方便，我也想用webpack，因为在某些时候我可能还有其他内容或样式可以关联到它。
到目前为止，我已经成功地使该库可用于节点和浏览器，但是以某种方式，我不能简单地将其导入另一个打字稿项目并使用它是打字稿库这一事实。

这是我的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)
})

从另一个打字稿项目中，我试图这样导入它：

import myWebpackTypescriptLib from "myWebpackTypescriptLib";

但是通过这种导入，在我的文本编辑器中，我无法访问打字稿定义，并且在运行时出现以下错误：ReferenceError: require is not defined。

我也尝试了以下方法，希望可以得到更好的结果：

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

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

我在编译器中尝试了模块和目标的各种配置，但是不知何故，当前的配置给了我最好的结果。我想做的三件事中至少有两件事。
我遵循了许多关于如何实现相似目标的教程，但是我从来没有使这三个元素都能正常工作。我一定还是想念什么。
有想法吗？

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

所有代码都位于“ / src /”目录中，而webpack在“ / dist /”中为浏览器和节点创建版本。
/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可以很好地呈现浏览器和节点的所有内容。

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"
  },
  ...
}

设置一个打字稿库以在Node.js，浏览器和其他打字稿项目中使用

1 个答案: