如何从需要构建步骤的 github 安装 npm 包，例如分叉图书馆时？

Posted 2023-02-16

【中文标题】如何从需要构建步骤的 github 安装 npm 包，例如分叉图书馆时？

【英文标题】：How to install a npm package from github requiring a build step, e.g. when forking a library?

【发布时间】：2021-10-25 18:18:31

【问题描述】：

假设您使用像 vue3-datepicker 这样的库。你意识到你需要自定义一些东西，作为第一步，你想使用它的自定义分支。

问题是，当包被推送到 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.

As a quick and dirty solution，我从.gitignore 的fork 中删除了./dist/ 文件夹，在我的fork 中运行npm i && npm run build:component，然后推送它。

巨大的缺点是，./dist/ 文件夹现在是该存储库的一部分，在我的 fork 中的每次更改之后，我还必须再次构建文件并推送这些文件。

我宁愿在我的应用程序中触发构建过程使用我的fork。我的申请有没有办法说：

当您安装该库时，您必须在下载所有文件后运行某个脚本？

该解决方案应该对npm 和yarn 都可用，因为可以在不同的应用程序中安装fork。

【参考方案1】：

来自npm-installDocs 的引用

如果正在安装的包包含prepare 脚本，则在打包和安装包之前，将安装它的dependencies 和devDependencies，并运行准备脚本。

所以在你的 fork 的 package.json 中你可以添加

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

【讨论】：

我不喜欢它成为分支的一部分，以防万一有人想从分支创建 PR。 （虽然它比提交整个 dist 文件夹要好）

@k0pernikus，同意，但您可以创建“可安装”分支，仅在更改之上添加该脚本

【参考方案2】：

如果您想在安装后触发构建，您可以在您的package.json 中使用postinstall 或build 脚本。在此脚本中，您可以使用 shell 命令或 javascript 程序创建目录并进行其他设置：

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