如何在打字稿monorepo中导入本地包

Posted 2023-03-13

【中文标题】如何在打字稿monorepo中导入本地包

【英文标题】：How to import local package in typescript monorepo

【发布时间】：2019-04-23 06:42:05

【问题描述】：

给定一个 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

【问题讨论】：

您应该使用项目参考。见the second half of this answer, under "this is great for monorepos"

【参考方案1】：

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

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

"compilerOptions": 
  "baseUrl": "."

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

如果不是这样，你可以使用paths:

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

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

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 安装）

【讨论】：

谢谢你提供的例子，但它似乎不能开箱即用（没有捆绑器）。包路径不会转换为包的相对路径。见文章medium.com/@caludio/…

我仍在尝试按照文章中的示例进行操作。

你能指定你如何尝试运行你的javascript文件吗？如果你使用webpack，你可以specify the same resolutions there，如果你直接通过node运行js文件，你可以使用npm link。如果你更新你的问题，我会更新我的答案

根据您的情况，也可以使用local paths。也许链接各个项目就足够了四个你的用例，你甚至不需要打字稿级别的配置

嘿，您已经使用 ts-node 和 tsconfig-paths 自己解决了，非常好 :) 我相应地更新了答案