monorepo 中 hoist 机制导致加载配置文件路径的变化

前言

作为一名前端，我们经常会在项目里添加大量的配置文件，用来配置各种各样的库和开发工具。

• 比如配置 typescript，我们会添加 tsconfig.json。

• 配置 npm,yarn,pnpm 这种包管理工具，我们会添加 .npmrc。

• 配置 eslint，我们要配置 .eslintrc.js，.eslintignore...

• 配置格式化，要配置 .editorconfig，.prettierrc...。

• 配置 git 的 .gitignore，.gitattributes

• 配置 jest 的 jest.config.ts

• babel -> babel.config.js

• postcss -> postcss.config.js

• webpack -> webpack.config.js

• .env,.env.dev,.env.sit,.env.prod,.env.local

• vite.config.[jt]s,vue.config.js,lerna.json,rollup.config.[jt]s,stylelint.config.js,tailwind.config.js,.browserslistrc,serverless.yml,Dockerfile,nginx.conf...

看到这么多配置文件，只能说前端好累，工作好苦，学不动躺平了。

配置文件的作用域

在通常情况下，上述这些文件，一般是放在项目的根目录下。此时它的默认作用域是对整个项目生效了。

但是在 monorepo 中，还是这么的简单方便吗？显然不是的。

这里我们以一个前端 yarn monorepo 为例:

// package.json"workspaces": {
  "packages": [
    "packages/*",
    "apps/*"
  ]}

其中 packages/* 中存放着所有的scope包，apps/* 表示所有的应用。

在 apps/* 中有 2 个项目，一个是 pc端->WebClient，另一个是移动端->MobileClient(以下简称Web和Mobile)。

显然，这两个项目的配置文件，有着极大的不同。比如 postcss.config.js 这个配置文件，我们在Mobile中引入了 viewport 自适应方案的插件，而Web端不需要，这造成了些许差别了。

此时显然把 postcss.config.js 放在 monorepo 的根目录是不恰当的，它需要跟着项目走。所以我们就可以在Web和Mobile中各放一个，再通过 preset 这种思想的方式，提炼公共插件即可。这时候配置文件的作用域就缩小，变成了 Web 和 Mobile 目录了。

假如有人问，为啥要分成2个端这样做，不能一套自适应吗？我的回答实际上也是可以的，比如你仅仅只需要把 postcss.config.js 变成 Function，然后判断一下传入路径，返回不同的配置即可，其余情况亦然。

hoist

hoist 机制,npm/yarn/pnpm都有，它能够把多个 repo 中版本不冲突的共用模块，会被尽可能地提升至根路径。

在 yarn 默认开启 hoist 后，我们可以看到，Web 和 Mobile 安装的包，都被保存在了 根目录 下的 node_modules 中。

此时应用似乎能正常运行。

接下来我们分别在 Mobile 和 Web 安装一些 UI Toolkit 包，同样，它们被提升到了根目录的 node_modules 中。但它们也能被正常的使用。

但是，由于 hoist 机制，UI Toolkit 包被提升后，它们不在项目的 postcss.config.js 作用范围内！

此时你使用 postcss-loader去处理，内部的 postcss-load-config加载到的配置文件，实际上是一个空对象！！！

如图所示:

监听 postcss-loader 中的 load-config部分代码

Image

注意加载的上下文和 load-config

Image

注意 hoist 后的文件路径和 load-config

Image

此时，假如有需求，要让 postcss 也走这样的配置，主要有 2 种方式:

1. 取消 UI Toolkit 的提升机制

2. 在根目录填充 postcss.config.js

显然，方法一比较符合我们的本意，所以我们需要做出如下修改：

  "workspaces": {
    "packages": [
      "packages/*",
      "apps/*"
    ],
    "nohoist": [
      "**/vant",
      "**/element-plus"
    ]
  }

这样就解决了这个问题。

同样这个机制也能解决 monorepo 中，多 vue/react版本的问题:

  "workspaces": {
    "packages": [
      "packages/*",
      "apps/*"
    ],
    "nohoist": [
      "**/react",
      "**/vue"
    ]
  }

这样你就可以愉快的同时启动 vue2 和 vue3 项目了。

参考

postcss-load-config source code

yarn#nohoist in Workspaces

pnpm#public-hoist-pattern