网站搜索

使用多个 '@/ ' 路径别名的 Monorepo - 在 TypeScript 中可用，但在 Webpack 编译器中不可用

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

我们有一个包含许多不同工作区包的单仓库，使用 TypeScript，并通过 Webpack 构建。

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

路径别名为每个声明，例如 @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 配置。

有办法解决这个问题吗——还是我们只能将所有 @/* 引用重命名为它们自己的包名？

答案＃1

你已经建立了一个多项目工程。有许多工具可以处理这些项目："Yarn Workspaces"、"Npm Workspaces" 和 Lerna

Lerna 是一个用于管理拥有多个包的 JavaScript 项目的工具。Lerna 管理 monorepos，monorepos 可以包含自身内的多个包的项目。

我以前用过 Lerna，你可以用它创建一个项目

 lerna init

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

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

你可以在 package2 的 package.json 中检查其依赖。如果你使用 Lerna，用户必须在他们的机器上安装 Lerna CLI 工具才能启动项目

相关文章