如何使用 npm 链接和使用 TypeScript 编写的模块进行开发？

Posted 2023-03-07

技术标签:

【中文标题】如何使用 npm 链接和使用 TypeScript 编写的模块进行开发？【英文标题】：How to use npm link with a module written using TypeScript for development? 【发布时间】：2020-02-16 03:25:15 【问题描述】：

我正在使用 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

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

【问题讨论】：

【参考方案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 中阅读有关路径映射的更多信息。

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案3】：

这可以在您的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 的基础，并且它是强制，如文档。

字符“@”不是强制性的。

按照这种方式设置后，您可以像这样轻松使用它：