时间戳

首页 > 解决方案 > How to import local package in typescript monorepo

typescript - How to import local package in typescript monorepo

问题描述

Given a monorepo project. --project_root/ |--packageA/ |--index.ts |--package.json |--foo/ |--index.ts |--packageB/ |--index.ts |--package.json |--bar/ |--spam.ts Normally, when you are in packageA/index.ts and you want to import packageB/index.ts you would do import index from '../packageB',

and when you are packageA/foo/index.ts and you want to import packageB/index.ts you need to move two directory up import index from '../../packageB'

The question is, is there a way to import like import index from 'packageB and for nested folder import spam from 'packageB/bar/spam'?

EDIT

I have uploaded a github repo to demo the issue https://github.com/jaimesangcap/lerna-ts-monorepo

标签： typescriptnpm

解决方案

您可以通过指定基本 url和（在更复杂的情况下）使用路径映射来做到这一点。

如果您有tsconfig.jsonin project_root，您可以通过定义来实现所需的导入策略

"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 配置中指定别名来完成：

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

推荐阅读