Monorepo 与 Lerna 和 TypeScript 无法通过路径别名导入包

Question

我正在尝试使用Lerna设置基于 TypeScript 的 monorepo ，其中我有两个包bar和foo。foo通过路径别名导入bar但失败。

\n

\n
1. tree
\n

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lerna.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 packages\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 bar\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.build.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 foo\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lib\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.d.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.build.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.build.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n

\n

\n
2. ./tsconfig.build.json
\n

\n

{\n  "compilerOptions": {\n    "baseUrl": ".",\n    "target": "es6",\n    "module": "commonjs",\n    "moduleResolution": "node",\n    "declaration": true\n  }\n}\n

\n

\n
3. ./tsconfig.json
\n

\n

{\n  "extends": "./tsconfig.build.json",\n  "compilerOptions": {\n    "baseUrl": ".",\n    "paths": {\n      "@company/bar": [\n        "packages/bar"\n      ],\n      "@company/foo": [\n        "packages/foo"\n      ]\n    }\n  }\n}\n

\n

\n
4. ./lerna.json
\n

\n

{\n  "packages": [\n    "packages/*"\n  ],\n  "version": "0.0.0"\n}\n

\n

\n
5. ./package.json
\n

\n

{\n  "name": "root",\n  "private": true,\n  "scripts": {\n    "tsc": "lerna run tsc"\n  },\n  "devDependencies": {\n    "lerna": "^3.22.1",\n    "ts-node": "^9.0.0",\n    "ts-node-dev": "^1.0.0-pre.63",\n    "typescript": "^4.0.3"\n  }\n}\n

\n

套餐栏：

\n

\n
6. ./packages/bar/src/index.ts
\n

\n

export const bar = \'bar\';\n

\n

\n
7. ./packages/bar/package.json
\n

\n

{\n  "name": "@company/bar",\n  "version": "1.0.0",\n\n  ...\n\n  "main": "lib/index.js",\n  "types": "lib/index.d.ts",\n  "scripts": {\n    "tsc": "tsc -p tsconfig.build.json"\n  }\n}\n

\n

\n
8. ./packages/bar/tsconfig.build.json
\n

\n

{\n  "extends": "../../tsconfig.build.json",\n  "compilerOptions": {\n    "outDir": "./lib"\n  },\n  "include": [\n    "src/**/*"\n  ]\n}\n

\n

\n
9. ./packages/bar/tsconfig.json
\n

\n

{\n  "extends": "../../tsconfig.json"\n}\n

\n

包foo：

\n

\n
10. ./packages/foo/src/index.ts
\n

\n

import { bar } from \'@company/bar\';\n\nconsole.log(bar);\n

\n

\n
11. ./packages/foo/package.json
\n

\n

{\n  "name": "@company/foo",\n  "version": "1.0.0",\n\n  ...\n\n  "main": "lib/index.js",\n  "types": "lib/index.d.ts",\n  "scripts": {\n    "tsc": "tsc -p tsconfig.build.json"\n  }\n}\n

\n

\n
12. ./packages/foo/tsconfig.build.json
\n

\n

{\n  "extends": "../../tsconfig.build.json",\n  "compilerOptions": {\n    "outDir": "./lib"\n  },\n  "include": [\n    "src/**/*"\n  ]\n}\n

\n

\n
13. ./packages/foo/tsconfig.json
\n

\n

{\n  "extends": "../../tsconfig.json"\n}\n

\n

最后：

\n

运行npm run tsc编译我的包，其中foo导入bar。它给了我以下错误：

\n

> lerna run tsc\n\nlerna notice cli v3.22.1\nlerna info Executing command in 2 packages: "npm run tsc"\nlerna info run Ran npm script \'tsc\' in \'@company/bar\' in 2.4s:\n\n> @company/bar@1.0.0 tsc /.../monorepo-lerna/packages/bar\n> tsc -p tsconfig.build.json\n\nlerna ERR! npm run tsc exited 2 in \'@company/foo\'\nlerna ERR! npm run tsc stdout:\n\n> @company/foo@1.0.0 tsc /.../monorepo-lerna/packages/foo\n> tsc -p tsconfig.build.json\n\nsrc/index.ts(1,21): error TS2307: Cannot find module \'@company/bar\' or its corresponding type declarations.\n

\n

错误本身非常清楚，尽管我不知道如何修复它（我猜 ./tsconfig.json (3) 内的路径别名看起来不错）。有什么想法我的配置混乱吗？我错过了什么？

\n

如果我更改import { bar } from \'@company/bar\';为import { bar } from \'../../bar/src\';一切正常，但是我想坚持使用第一种导入方式bar。

\n

Answer 1

这是允许您将包导入为的部分@company/bar

    "paths": {
      "@company/bar": [
        "packages/bar"
      ],
      "@company/foo": [
        "packages/foo"
      ]
    }

这是在 中指定的./tsconfig.json。当您尝试编译foo它所使用的包时./packages/foo/tsconfig.build.json，它从不包含根配置或指定路径本身，您可能希望从基础中删除导入方案tscofig并将它们添加到内部包配置中：

./packages/foo/tsconfig.build.json应包含以下内容：

{
  "compilerOptions": {
    "paths": {
      "@company/bar": [
        "../bar"
      ]
    }
  }
}

如果需要的话，同样packages/bar/tsconfig.build.json应该允许进口@company/foo。