9

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

4

3 回答 3

12

是的，您还需要使用 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 文档中阅读有关路径映射的更多信息。

于 2019-10-19T10:49:56.740 回答
8

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

于 2020-03-12T23:39:24.297 回答
0

这可以在您的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

于 2019-10-19T11:50:14.987 回答