typescript - 如何在 typescript monorepo 中导入本地包

Question

给定一个 monorepo 项目。
--project_root/
|--packageA/
|--index.ts
|--package.json
|--foo/
|--index.ts
|--packageB/
|--index.ts
|--package.json
|--bar/
|--spam.ts
通常，当你在 packageA/index.ts你想导入 packageB/index.ts你会做import index from '../packageB' ,

当你是packageA/foo/index.ts你想导入 packageB/index.ts你需要向上移动两个目录 import index from '../../packageB'

问题是，有没有办法像import index from 'packageB一样导入和嵌套文件夹 import spam from 'packageB/bar/spam' ？

编辑

我已经上传了一个 github repo 来演示这个问题 https://github.com/jaimesangcap/lerna-ts-monorepo

Answer 1

您可以通过指定 base url 来做到这一点和(在更复杂的情况下)使用 path mapping .

如果你在project_root中有一个tsconfig.json，你可以通过定义实现想要的导入策略

"compilerOptions": {
  "baseUrl": "."
}

如果包名称始终与子项目的文件夹名称相对应，则此方法有效。

如果不是这种情况，您可以使用路径:

"compilerOptions": {
  "baseUrl": ".", // This must be specified if "paths" is.
  "paths": {
    "A": ["packageA"],
    "B": ["packageB"],
    "A/*": ["packageA/*"],
    "B/*": ["packageB/*"]
  }
}

这将导致 typescript 在编译期间正确解析导入的类型。然而，导入路径并没有在编译的 javascript 中解析，这意味着有必要告诉管道中的下一步(通常是像 webpack 这样的打包器)如何解析这些导入。对于 webpack 特别是这可以通过指定 alias 来完成。在 webpack 配置中:

resolve: {
  alias: {
      A: path.resolve(__dirname, 'packageA/'),
      B: path.resolve(__dirname, 'packageB/')
  }
}

如果你想直接执行 typescript 文件，ts-node是最简单的方法，因为如果您使用 tsconfig-paths，它已经知道 typescript 配置中的修改路径。 - 在这种情况下，您只需使用 ts-node -r tsconfig-paths/register packageA/index.ts 执行文件(ts-node 和 tsconfig -paths 必须通过 npm 安装)