如何将 npm link 与使用 TypeScript 编写的模块一起用于开发？

Question

我正在使用 TypeScript 和 Webpack 构建一个库。

为了开发这个库，我创建了一个单独的测试项目（使用 JS 编写）并使用npm link <package-name>.

问题是链接指向构建文件，npm run build每次进行更改时我都需要运行。

我想要一个指向源文件的链接并进行实时重新加载。是否可以？我是否还需要使用 TS 编写我的测试项目才能使其成为可能？

图书馆package.json：

{
  ...
  "main": "lib/qr-code-styling.js",
  "files": [
    "lib"
  ],
  "scripts": {
    "build": "webpack --mode=production"
  },
  ...
}

库代码https://github.com/kozakdenys/qr-code-styling/tree/v1

测试项目代码https://github.com/kozakdenys/qr-code-styling-site

PS我也试过"module": "src/index.ts"在package.json，但它会导致错误的测试项目Uncaught Error: Cannot find module './core/QRCodeStyling'

Answer 1

另一种选择是让您的 TS 项目自动重建tsc --watch，然后通过以下方式在您的项目中使用编译后的代码npm link ../path/to/dep

Answer 2

是的，您还需要在 TypeScript 中编写测试项目。之后，您需要将包映射到测试项目tsconfig文件中的链接模块源文件。

在文件的compilerOptions条目中tsconfig添加一个baseUrl和一个paths条目，如下例所示：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "linked-module-name": ["node_modules/linked-module-name/src"],
      "linked-module-name/*": ["node_modules/linked-module-name/src/*"]
    }
  }
}

在TypeScript 文档中阅读有关路径映射的更多信息。