具有多个'@/'路径别名的 monorepo - 适用于 TypeScript，但不适用于 Webpack 编译器

Question

我认为这是不可能的，但值得问一下，因为我不是webpack专家!

我们有一个包含许多不同的工作空间包的单库，使用typescript，使用webpack构建。

每个工作区都有自己的tsconfig.json和webpack.config.js来构建该包。

为每个路径声明别名，如@package-a,@package-b等

有些包是从它们自己独立的仓库中导入的，并且声明@作为自己的别名。

这意味着我们在不同的包中有多个@别名。

ts配置

"paths": {
"@/*": ["./src/*"],
"@pacakge-a/*": ["./src/*"],
"@pacakge-b/*": ["../package-b/src/*"],
"@package-c/*": ["../package-c/src/*"]
}

在代码中你可以导入像

这样的东西

import { Thing } from '@/data/models/Thing';
import { stuff, in, other, package } from '@package-c/otherThings';

这可以工作，但是，每个都有一个本地tsconfig.js文件，似乎在包级别工作。

问题在构建时出现。当我们有跨包依赖时——两个文件都使用它们的本地别名@——编译器不知道该使用哪个。

Webpack有自己的别名

resolve: {
alias: {
"@": path.resolve(__dirname, 'src/'),
"@pacakge-a/*": path.resolve(__dirname, 'src/'),
"@pacakge-b": path.resolve(__dirname, '../pacakge-b/src/'),
"@pacakge-c": path.resolve(__dirname, '../pacakge-c/src/')
},
}

但是很明显，在构建时，只有一个webpack配置用于该包。

是否有办法解决这个问题-或者我们只需要将所有@/*引用重命名为它们自己的包名?

Answer 1

您已经构建了一个多项目项目。有很多工具可以处理这些项目:"Yarn workspace"、"Npm workspace"和Lerna

Lerna是一个管理多个JavaScript项目的工具包。Lerna管理单orepos，其中可以包含项目内部有多个包。

我以前和Lerna一起工作过，你可以用

创建一个项目

lerna init

将创建"packages"目录和lerna.json文件。你添加你的webpack项目，package1, packge2;放到packages目录中。如果你想链接包:

// setting package1 as package2 dependencies 
lerna add package1 --scope=package2

可以在package.json中查看package2的依赖关系。如果你使用Lerna，用户必须在他们的机器上安装Lerna cli工具来启动项目