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

Question

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

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

问题是 link 导致构建文件，我每次进行更改时都需要运行 npm run build。

我想要 link 到源文件并进行实时重新加载。可能吗？我是否也需要使用 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

P.S。我也在package.json中尝试了"module": "src/index.ts"，但是导致测试项目出错Uncaught Error: Cannot find module './core/QRCodeStyling'

Answer 1

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

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

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

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

Answer 2

这可以在您的 tsconfig.json 文件中设置，因为它是 TS 功能。

你可以这样做：

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

请记住，您要引用的 path 以您的 baseUrl 作为您指向的 route 的基础，它是 强制性 如文档所述。

字符“@”不是必需的。

这样设置后，您可以像这样轻松使用它：

import { Yo } from '@config/index';

您可能唯一注意到的是智能感知在当前最新版本中不起作用，因此我建议遵循 importing/exporting 文件的索引约定。

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

你可以在这里结帐

https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea

Answer 3

另一种选择是让您的 TS 项目使用 tsc --watch 自动重建，然后通过 npm link ../path/to/dep

在您的项目中使用编译后的代码

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

How to use npm link with a module written using TypeScript for development?

typescript

npm

webpack

package.json

npm-link