npm to pnpm

[lmislm]

升级内容

建议先npm升级相关依赖，然后再转pnpm

node-sass to dart sass, vue-cli4 to vue-cli5,  npm to pnpm 

node-sass升级

1. 卸载node-sass npm uninstall node-sass
2. 安装dart-sass npm install sass sass-loader -D
3. css修改，/deep/ strong{ => ::v-deep
4. 修改webpack配置

   {
    loader: 'sass-loader',
     options: {
         implementation: require('sass'),
     },
   },

vue-cli4升级

1. 安装npm install @vue/cli@5.x
2. 修改webpack配置，有些函数名变了，例如: output.jsonpFunction -> output.chunkLoadingGlobal, 具体点击这里链接

npm到pnpm

1. 卸载npm包 rm -rf node_modules
2. 创建.npmrc文件
3. 转换相关文件，xxx-lock.json 转为pnpm-lock.yaml, 保证依赖不变，pnpm import
4. 安装依赖包pnpm install，可以删除xxx-lock.json文件

知识点

shamefully-hoist: true, 将依赖提升到根node_modules 目录下解决幽灵依赖

扁平化依赖虽然解决了不少问题，但是随即带来了依赖非法访问的问题，项目代码在某些情况下可以在代码中使用没有被定义在 package.json 中的包，这种情况就是我们常说的幽灵依赖。

参考：

1. https://blog.51cto.com/u_15713165/5459860
2. https://booop.net/migrate-from-npm-to-pnpm/
3. https://github.com/webpack/webpack.js.org/issues/3940
4. 幽灵依赖
5. https://pnpm.io/zh/npmrc#public-hoist-pattern