Docker前端工程npm平滑过渡到pnpm v7的姿势

Posted 2023-03-08 crper

前言

pnpm挺多优点的，比如安装依赖速度很快，命令行也可以少打几个字符；
标题为啥说平滑，就是尽可能的少破坏性的迁移【针对现有的工程的改造】，
但是又能受用到pnpm的部分特性，使其效益符合我们的期望即可！
刚好手头有个Docker运行时的前端工程可以玩玩，感兴趣的可以往下看。

目标

• npm v8 -> pnpm v7.28

包括相关门禁的调整【比如husky】。

姿势

1. 安装pnpm

1. 安装姿势： https://pnpm.io/installation
2. 进到工程，干掉现有工程内的node_modules目录

2. 配置.npmrc

因为整个工程是在一个大的Docker里面，依赖资源这些通过docker volume外挂映射进去的;

pnpm 依赖项将存储在一个全局内容可寻址的仓库中（pnpm store path），具体项目中使用依赖采用硬链接方式，而不是进行复制。对于每个模块的每个版本只保留一个副本。

这个对于本地项目可以大大节省空间，有了相关的缓存之后安装极快。
但是对于我们要外挂进去给使用就需要调整下了，提权一下；

# .npmrc
# https://pnpm.io/npmrc#dependency-hoisting-settings
shamefully-hoist=true

这玩意会创建一个类似npm传统的扁平化依赖结构【虽然pnpm官方并不提倡，但是对应特定场景这玩意就是合理的】

依赖的引用收敛在整个工程内，可以很好的外挂到Docker内正确识别！

3. 切换命令的调用

可以少打一些字符流，如图所示

命令行继续透传参数也不需要额外带--, 舒服很多，如下

# 之前
npm run ms:docker -- --path src/pages/project/setting/measure.js -n 1

# 现在
pnpm ms:docker --path src/pages/project/setting/measure.js -n 1

4. husky&lint-stage适配？

不用大改，基本之前npm npx配置那套的脚本可以正确复用

# .husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

if ! type node >/dev/null 2>&1; then
  echo 'node 未安装'
  if [ -d "$HOME/.nvm" ]; then
    echo "有.nvm这个目录"

    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \\. "$NVM_DIR/nvm.sh"

    matchNvmUseNodeVersion=$(nvm current)
    if [ "$matchNvmUseNodeVersion" == "none" ]; then
      echo "没有找到NVM设置的Node版本,请执行nvm install --lts"
      exit 1
    else
      echo "检测到nvm设置了有效的Node版本: $matchNvmUseNodeVersion"
      export PATH="$NVM_DIR/versions/node/$matchNvmUseNodeVersion/bin:$PATH"
    fi
  fi

else
  echo 'node 已安装'
  nodeVersion=$(node -v)
  npmVersion=$(npm -v)
  echo "node 版本:$nodeVersion"
  echo $(which node)
  echo "npm 版本:$npmVersion"
  echo $(which npm)
fi

npx lint-staged --verbose

结论

1. 冷安装比之前快了30%左右，符合预期
2. CLI的调用更加简短，上手成本更低
3. husky机制不用特殊去配置，可以基于npx这种触发commitlint

有不对之处请留言，谢谢阅读！