pnpm迁移 - 技术栈

1. 开始

pnpm意为performant npm，即性能更佳的npm。在时间和空间上，pnpm都有极大提升，快、更节省空间。另外，还顺便解决了幽灵依赖的问题。

社区主流库都迁移了pnpm，比如vue、vitejs、element-plus。

2. 原理

pnpm通过软硬链接的方式存放依赖，node_modules下的第一层文件，指向node_modules/.pnpm中，而node_modules/.pnpm中的包，又以硬链接的方式指向全局store。

3. pnpm迁移

下面是项目迁移pnpm的步骤。

3.1. 安装pnpm

注意node14版本只能使用pnpm7及以下，参见官网说明。

bash 复制代码

npm i pnpm -g

3.2. 生成pnpm-lock.yaml

使用项目中的package-lock.json文件生成pnpm-lock.yaml文件。

bash 复制代码

pnpm import

3.3. 删除node_modules

bash 复制代码

sudo rm -rf node_modules

3.4. 使用pnpm安装依赖

bash 复制代码

pnpm i

3.5. 解决幽灵依赖

幽灵依赖就是没有在package.json中，但是项目中，或者引用的包中使用到的依赖。

我们项目的幽灵依赖包括：

vue-loader
@types/jest
js-base64
tim-upload-plugin
vue-plugin-load-script
...

4. 遇到的问题

4.1. loader-utils

html-webpack-plugin版本不能是v0.x版本，需要升级到v1.x，否则会因为loader-utils版本问题而报错：

bash 复制代码

Syntax Error: TypeError: loaderUtils.getOptions is not a function


 @ ./src/project/tgs/main.js 14:0-35 221:13-16
 @ multi ./node_modules/.pnpm/webpack-dev-server@3.11.3_webpack@4.46.0/node_modules/webpack-dev-server/client?https://192.168.1.17:443&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/project/tgs/main.js

4.2. PostCSS

报错：

javascript 复制代码

Syntax Error: Error: PostCSS plugin autoprefixer requires PostCSS 8.

解决办法：

bash 复制代码

pnpm i autoprefixer@8.0.0 -D

bash 复制代码

pnpm i webpack@4.46

4.3. eslint解析Vue组件失败

报错：

复制代码

invalid ecmaVersion

解决办法：

js 复制代码

// .eslintrc.js
parserOptions: {
  ecmaVersion: 12,
},

4.4. EISDIR: illegal operation

之前通过npm安装的包要删除之后，再执行pnpm install，否则会报错：

arduino 复制代码

 EISDIR  EISDIR: illegal operation on a directory, read

4.5. miniprogram-ci

小程序的CI工具用pnpm的时候有问题，问了相关开发人员，目前并不支持。

developers.weixin.qq.com/community/d...

4.6. vue-loader版本

vue-loader需要安装15版本，否则会报错：

java 复制代码

Syntax Error: Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

参考这里

4.7. file-type

报错：

vbnet 复制代码

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

解决：

bash 复制代码

npm i file-type@16.5.3

参考：github.com/sindresorhu...

5. 效果对比

其实我们的流水线已经做了优化，会对比package.json的依赖是否相同，若不同才执行npm install。

但问题是多个分支使用的是同一条流水线，而不同分支上的依赖很有可能不同，比如press-ui就处于持续迭代阶段，所以用pnpm优化还是有必要的。

全量安装的话，能节省90s左右。