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

Posted crper

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Docker前端工程npm平滑过渡到pnpm v7的姿势相关的知识,希望对你有一定的参考价值。

前言

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

有不对之处请留言,谢谢阅读!

以上是关于Docker前端工程npm平滑过渡到pnpm v7的姿势的主要内容,如果未能解决你的问题,请参考以下文章

前端工程化 - 前端技术栈构建

果断放弃npm切换到pnpm--节约磁盘空间(256G硬盘救星)

果断放弃npm切换到pnpm--节约磁盘空间(256G硬盘救星)

pnpm + workspace + changesets 构建你的 monorepo 工程

pnpm,npm 与 yarn 后出现新一代好用的管理器

pnpm