如何在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仓库来演示这个问题 https://github.com/jaimesangcap/lerna-ts-monorepo

Answer 1

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

如果tsconfig.json中有一个project_root，则可以通过定义实现所需的导入策略

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

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

如果不是这种情况，则可以使用paths：

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

这将导致打字稿在编译过程中正确解析导入类型。但是，导入路径在编译的javascript中无法解析，这意味着有必要告诉管道中的下一步（通常是打包程序，如webpack）如何解析这些导入。专门针对webpack，这可以通过在webpack配置中指定alias来完成：

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

如果您想直接执行打字稿文件，ts-node是最简单的方法，因为如果您使用tsconfig-paths，它将已经知道打字稿配置中的修改路径-如果您只需要使用node-ts -r tsconfig-paths/register packageA/index.ts执行文件（{{1}和node-ts必须通过npm安装）