【前端/npm】本地编译、打包、安装第三方库(以element-plus为例)

说在前面

• node版本：v16.15.1
• npm版本：8.11.0
• pnpm版本：7.14.0
• element-plus版本：dev分支 48f837baf965e80b4a88c6ffe4d25a137ca77c92

场景

• 在使用element-plus的tree组件时，发现其拖拽功能不太满足需求，在将节点拖拽出tree节点范围后，依旧会将节点drop到对应位置，如下图：
  
  
• 由于未找到在不修改源代码的条件下的解决方式，于是决定改代码，自己打包。

步骤

• Clone

  git clone https://github.com/element-plus/element-plus.git
  cd element-plus
  

• 参考官方文档进行编译

  npm install pnpm
  pnpm config set registry https://registry.npmmirror.com #设置国内源 
  pnpm build
  

• 修改代码
  

  let indicatorTop = -9999
  const distance = event.clientY - targetPosition.top
  // 代码比较简单 只是添加了判断x坐标的逻辑
  const inRangeX = event.clientX >= targetPosition.left && event.clientX <= targetPosition.right - 100
  
  if (distance < targetPosition.height * prevPercent && inRangeX) {
    dropType = 'before'
  } else if (distance > targetPosition.height * nextPercent && inRangeX) {
    dropType = 'after'
  } else if (dropInner && inRangeX) {
    dropType = 'inner'
  } else {
    dropType = 'none'
  }
  

• 测试

  pnpm run docs:gen-locale
  pnpm run docs:dev
  

  

• 打包
  测试完成后就可以打包，然后本地安装了

  cd /path/to/element-plus
  pnpm build
  cd dist/element-plus
  npm link
  npm pack
  # 执行完成后会生成一个压缩包，例如element-plus-0.0.0-dev.1.tgz
  

• 安装

  # 进入需要用到element-plus的工程目录
  cd /path/to/your_project
  npm install /path/to/element-plus/dist/element-plus/element-plus-0.0.0-dev.1.tgz
  

  之后就可以正常使用了