[フロントエンド/npm] サードパーティのライブラリをローカルでコンパイル、パッケージ化、インストールします (element-plus を例にします)

前もって言う

• ノードのバージョン: v16.15.1
• npmバージョン: 8.11.0
• pnpm バージョン: 7.14.0
• 要素プラス バージョン: 開発ブランチ 48f837baf965e80b4a88c6ffe4d25a137ca77c92

シーン

• このコンポーネントを使用しているelement-plusときにtree、そのドラッグ機能が要件を満たしていないことがわかりました。tree次の図に示すように、ノードをノード範囲外にドラッグした後も、ノードは対応する位置にドロップされたままになります。
  
  
• ソースコードを変更しないと解決策が見つからなかったので、コードを変更して自分でパッケージ化することにしました。

ステップ

• クローン

  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
  

  その後は普通に使えるようになりました