[pnpm实践问题]ERR_PNPM_INVALID_OVERRIDE_SELECTOR Cannot parse the "//" selector in the overrides

尝试运行vue-vben-admin项目出现以下问题

我注意到仓库新代码都没有以下的问题了哦，作者更新还是很快的。

1.执行pnpm install的时候报错：ERR_PNPM_INVALID_OVERRIDE_SELECTOR Cannot parse the "//" selector in the overrides

翻译：在overrides里面无法解析"//"
这个问题在issue中能找到，作者也有回答. 解决办法如下：

删除无法解析的"//",
pnpm降级到6.23.6（没试，不想降级）

这是pnpm在读package.json中的配置时出现的问题,pnpm.overrides或者resolutions存在"//"，我选择删掉，因为依赖源选择好了，在国内应该都有镜像

pnpm.overrides 和 yarn 提供的resolutions 作用类似：指定依赖版本覆盖所有依赖及子依赖。 (npm可以直接安装指定版本）
resolutions在遇到某些子依赖高版本有bug的时候，固定所有子依赖的版本有用

package.json
"resolutions": {
   "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
   "bin-wrapper": "npm:bin-wrapper-china",
   "rollup": "^2.56.3",
   "gifsicle": "5.2.0"
 },

pnpm好处：

全局安装，公用依赖，同名包同版本只会下载一次，提升速度
项目中只会展示一级依赖，不会引入你不知道的子级依赖（npm将依赖拍平以减少重复包的下载）

2.关于npm下载依赖esbuild报错的问题throw new Error(`esbuild: Failed to install correctly

网上有很多文章解决esbuild安装问题，就是执行node node_modules/esbuild/install.js安装后，再跑就可以了。

这里我提一点，不要无脑复制粘贴，要看你的esbuild的报错路径

以下我的报错路径就是另外一个依赖里面的报错，尴尬了

 at Object. (/Users/ruios/web/vue-vben-admin-main/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2:7)

根据目录找到文件夹，确实里面里面也有一个esbuild
所以执行以下

node node_modules/vite-plugin-mock/node_modules/esbuild/install.js

再次运行就ok了

3. 提示build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".

在vite.config.js中有打包配置terserOptions为了去掉console，从提示可以看出来，现在Vite默认使用esbuild去作为代码压缩器，如果想要使用terserOptions这些配置，要增加minify：terser。
看文档默认esbuild压缩有优势，那也可以删掉terserOptions

官方文档.png

minify: 编译优化手段，指在不影响代码语义的情况下，尽可能的减小程序的体积，常见的minify工具如terser、uglify，swc和esbuid也自带minify功能。

vite.config.js
  build: {
      target: 'es2015',
      outDir: OUTPUT_DIR,
      terserOptions: {
        compress: {
          keep_infinity: true,
          // Used to delete console in production environment
          drop_console: VITE_DROP_CONSOLE,
        },
      },
      // Turning off brotliSize display can slightly reduce packaging time
      brotliSize: false,
      chunkSizeWarningLimit: 2000,
    },

4. vite.config.js中有一个配置optimizeDeps引起了我的兴趣

optimizeDeps: {
      // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
      include: [
        '@iconify/iconify',
        'ant-design-vue/es/locale/zh_CN',
        'ant-design-vue/es/locale/en_US',
      ],
    },

该配置的目的：

兼容 CommonJS 和 AMD 模块的依赖（下图中needsInterop标志为true就是要重写CommonJS的导出）
因为 Vite 的 DevServer 是基于浏览器的 Natvie ES Module 实现的，所以对于使用的依赖如果是 CommonJS 或 AMD 的模块，则需要进行模块类型的转化（ES Module）
减少模块间依赖引用导致过多的请求次数,加快启动速度
预编译后会将dependencies的依赖和optimizeDeps.include中的依赖进行预编译缓存，并生成存储的路径文件node_moduels/.vite/_metadata.json

预编译缓存.png

为了加快二次及后续编译速度，自己写optimizeDeps比较麻烦，这里到npm上看看用起来吧：vite-plugin-optimize-persist 吧
老实讲：vite项目页面稍微多一丢丢东西，开发体验时首次加载页面真的慢。不过有了第一次，后面还是舒服

5. vite（esbuild + rollup）

关于esbuild的优秀，网上有很多构建优势对比图，甩webpack一条街。

Vite 用 esbuild 替代 Rollup 进行预打包，速度也非常快，上面的第三点可以看到生产可以用 esbuild 作为压缩器。生产打包还是用的Rollup， esbuild 目前对生产包支持不够健壮，很多配置无法通过 esbuild 实现