如何导入本地打字稿模块？

Question

我正在构建一个 TypeScript 模块，我想最终发布到 NPM，但我首先想将它导入到另一个本地宿主项目中进行测试。这两个项目都在 TypeScript 中。

模块使用tsc 成功编译，并将看似正确的文件输出到dist 目录。该模块包含一个storybook，通过相对本地路径成功导入和编译模块。

在宿主项目中，我尝试了npm link 和本地npm install ../localmodule 来导入模块。

模块tsconfig是：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "preserve",
    "declaration": true,
    "declarationMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "noImplicitAny": true,
    "typeRoots": ["./src/types"],
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

模块package.json有

  "main": "dist/index.js",
  "types": "dist/index.d.ts",

当我尝试使用导入的本地模块编译宿主项目时，我遇到了一堆错误，这些错误在模块 storybook 或开发过程中没有看到。

1. 一个关键路径错误，表明宿主项目没有看到其中一个模块导出丢失或找不到。

<e> ERROR in ../react-regl/dist/index.js 9:18-51
<e> Module not found: Error: Can't resolve './components/ReglFrame' in '/Users/kevzettler/code/react-regl/dist'
<e>  @ ./src/Ground.ts 6:0-30 11:11-21 12:15-27 20:26-30 31:13-17
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77

此导出在模块dist 目录中得到确认：

kevs-mbp:react-regl kevzettler$ ls dist/components/
ReglFrame.d.ts      ReglFrame.d.ts.map  ReglFrame.jsx

1. 还有一些类型错误表明宿主项目丢失或推断类型不同于storybook

<e> ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
<e> ./src/Ground.ts
<e> [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(17,17)
<e>       TS2339: Property 'clear' does not exist on type 'ReactRegl'.
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77
<e>
<e> ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts
<e> ./src/Ground.ts
<e> [tsl] ERROR in /Users/kevzettler/code/hypeworks/src/Ground.ts(19,21)
<e>       TS2339: Property 'texture' does not exist on type 'ReactRegl'.
<e>  @ ./src/RenderStore.ts 24:0-48 271:12-24 292:12-18 488:28-40 497:28-34
<e>  @ ./src/ClientStore.ts 18:0-40 74:32-43
<e>  @ ./src/browser.worker.ts 1:0-40 10:20-31
<e>  @ ./src/index.ts 83:21-77

我可以确认这些clear 和texture 方法是在模块的.d.ts 文件中定义的。

宿主项目 tsconfig 的样子

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "esnext",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "useDefineForClassFields": true,
    "lib": [
      "es2019",
      "dom"
    ],
    "exclude": [
      "./src/server.worker.ts",
      "./src/server.ts",
      "./src/network/ServerNetwork.ts",
      "./src/Worker/implementation.worker_threads.ts"
    ]
  }
}

Answer 1

我假设您在宿主项目的编译期间使用 webpack。如果是这样，您需要在 webpack 配置文件的 resolve.extensions 属性中指定 .jsx，以便宿主项目可以识别具有这些扩展名的模块。这是一个示例 webpack.config.js 使用 resolve.extensions 与 .js、.jsx 和 .json。

module.exports = {
  // your other config here...
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  }
};

Answer 2

制作一个扩展名为 {{name}}.d.ts 的文件

global.d.ts

declare module "your-module-name";