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

Question

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

我们有一个包含许多不同工作区包的 monorepo，使用 typescript，使用 webpack 构建。

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

为每个 like等声明路径别名@package-a。@package-b

一些包是从自己的独立存储库导入的，并声明@为自身的别名。

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

ts配置

"paths": {
      "@/*": ["./src/*"],
      "@package-a/*": ["./src/*"],
      "@package-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/'),
      "@package-a/*": path.resolve(__dirname, 'src/'),
      "@package-b": path.resolve(__dirname, '../package-b/src/'),
      "@package-c": path.resolve(__dirname, '../package-c/src/')
    },
  }

但显然在构建时，该包仅使用一个 webpack 配置。

有什么办法可以解决这个问题吗？或者我们只需将所有@/*引用重命名为它们自己的包名称？

Answer 1

您已经构建了一个多项目项目。有很多工具可以处理这些项目：“Yarn Workspaces”、“Npm Workspaces”和 Lerna

Lerna 是一个用于管理具有多个包的 JavaScript 项目的工具。Lerna 管理 monorepos，它可以保存包含多个包的项目。

我之前与 Lerna 合作过，您可以使用以下命令创建一个项目

 lerna init

这将创建“packages”目录和lerna.json文件。将 webpack 项目“package1,pacakge2”添加到 packages 目录中。如果你想链接包：

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

你可以在package.json中检查package2的依赖关系。如果您使用 Lerna，用户必须在其计算机上安装 lerna cli 工具才能启动项目