如何從需要構建步驟的 github 安裝 npm package，例如在分叉庫時？

Question

假設您使用像vue3-datepicker這樣的庫。 你意識到你需要定制一些東西，作為第一步你想使用它的定制分支。

問題是，當 package 被推送到 npm 的注冊表時有一個構建步驟，因為該項目不使用普通的 JavaScript，但可能有 vue 或 typescript 文件。

在這種情況下，這將是npm run build:component ，盡管這取決於項目。

只需通過以下方式從 github 安裝 fork：

yarn add <GitHub user name>/<GitHub repository name>#<branch/commit/tag>

因此這還不夠，因為./dist文件夾不存在。

你會得到非常奇怪的錯誤，比如：

error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-datepicker". The package may have incorrect main/module/exports specified in its package.json.

作為一個快速而骯臟的解決方案，我在我的叉子中刪除了.gitignore中的./dist/文件夾，在我的叉子中運行npm i && npm run build:component ，然后推送它。

巨大的缺點是，. ./dist/文件夾現在是該存儲庫的一部分，在我的 fork 每次更改后，我還必須再次構建文件並推送這些文件。

我寧願使用我的叉子在我的應用程序中觸發構建過程。 我的申請有沒有辦法說：

安裝該庫時，下載所有文件后必須運行某個腳本嗎？

該解決方案應該適用於npm和yarn ，因為叉子可以由不同應用程序中的任何一個安裝。

Answer 1

來自npm-install Docs 的引述

如果正在安裝的package中包含prepare腳本，則在打包安裝package之前，會先安裝其dependencies和devDependencies ，並運行prepare腳本。

所以在你的分叉package.json你可以添加

"scripts": {
    // ...
    "build:component": "rollup -c build/rollup.config.js",
    "prepare": "yarn build:component || npm run build:component"
}

Answer 2

如果要在安裝后觸發構建，可以在postinstall package.json使用安裝后或build腳本。 在此腳本中，您可以使用 shell 命令或 javascript 程序創建目錄並進行其他設置：

{
  "scripts": {
    "build": "mkdir dist && npm run build:component",
    "build:component": "some command"
  }
}