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

【问题标题】：How to use npm link with a module written using TypeScript for development?如何使用 npm 链接和使用 TypeScript 编写的模块进行开发？
【发布时间】：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'

【问题讨论】：

标签： typescript npm webpack package.json npm-link

【解决方案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 的基础，并且它是强制，如文档。

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

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

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

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

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

你可以在这里结帐

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

【讨论】：