javascript - monorepo 路径别名问题,如何配置？

Question

如下图的拓扑图所示，common是a,b,c三个项目公共引用的，如何给这个common配置路径别名，并且配置后引用它的a,b,c也可以同样生效的？

root
├── package.json
├── pnpm-workspace.yaml
├── packages
├── common

├── package.json

├── utils

├── package.json

├── A

├── package.json

├── B

├── package.json

├── C

├── package.json

Answer 1

一般支持 workspace 的工具都提供了单独的协议来访问内部包，比如 pnpm

// a package.json{    "name": "a",    "version": "1.0.0",    "devDependencies": {        "common": "workspace:^1.0.0",    }}

// common package.json{    "name": "common",    "version": "1.0.0",    "devDependencies": {        "a": "workspace:^1.0.0",    }}

https://www.pnpm.cn/workspaces

包与包之间生产环境下相互引用，通常有几种方案

• 所有的包开发环境都用 build --watch 这种方式，就都不需要配 alias，但包需要按照依赖顺序来构建，且不能有循环依赖
• 所有包正常起 dev，但都需要配置对应包的 alias
• 还有一种方案，就是写个脚本，开发环境下把每个包 package.json 里面的入口文件替换成源码入口，生产环境再替换回构建产物的入口

Answer 2

对于monorepo，路径别名可以帮助我们解决不同项目间公共模块的引用问题。在你的拓扑图中，common 是 a, b, c 三个项目的公共引用。为了配置路径别名并且让 a, b, c 引用它也可以生效，你可以按照以下步骤进行操作：

1. 设置路径别名：
   在项目的根目录下（也就是包含 package.json 和 pnpm-workspace.yaml 的地方），你可以创建一个别名文件（例如 .alias.json），然后在这个文件中定义你的别名。

例如，你可以在 .alias.json 中写入以下内容：

{  "common": "packages/common"}

这样，你就为 common 设置了别名。

2. 配置pnpm-workspace.yaml：
   在 pnpm-workspace.yaml 文件中，确保你的项目已经被配置为使用别名。例如：

packages:  - 'packages/*'  - alias:      common: 'packages/common'

3. 在项目中引用common：
   在你的项目（如 A, B, C）中，你可以通过别名来引用 common 中的模块。例如，在 A/package.json 中，你可以这样引用：

{  "dependencies": {    "common": "//common/..."  }}

注意这里的路径格式：//common/...，前面的双斜杠是必须的，因为它们告诉 pnpm 这个路径是一个别名，而不是一个相对路径。而 ... 表示递归地获取所有子模块。

4. 更新依赖：
   在你做了以上更改后，确保运行 pnpm update 来更新你的依赖。
5. 使用别名：
   在代码中，你可以像这样导入 common 中的模块：

import something from '@/common/some-module';

或者使用 Node 的 require 方法：

const something = require('@/common/some-module');

请注意，这里的 @ 是别名的简写，代表 .alias.json 文件中定义的别名。如果你定义的是其他别名，那么请使用相应的别名。