在 Vercel 上的预构建脚本中运行 npm build 以构建 Next.js 应用程序

Question

我正在构建一个基于 Markdown/MDX 的博客平台（请参阅 github repo）。我希望允许用户提供自己的 React 组件，他们可以将其插入到 MDX 文件的内容部分中。

我陷入困境：我希望允许用户导入 package.json 中尚未存在的其他依赖项。

也许用户想要创建一个使用

chart.js

和

react-chartjs-2

的图表组件。他们可以使用通过更新来导入这些依赖项的组件

package.json

。

但是，由于各种原因，我不希望我的用户对

package.json

进行手动编辑。

我的方法是使用预构建脚本（在

package.json

中定义）。

在此预构建脚本中，我根据自定义组件的内容检测需要哪些依赖项。然后，我在预构建期间使用

npm install

运行所需的

execSync

命令。

我遇到的问题是，如果我运行任何

npm install

命令，我的构建将会失败并出现一系列

Module not found

错误。这些模块是第一方和第三方依赖项的混合体。

我怀疑我通过从预构建脚本手动运行

npm install

来创建某种冲突或覆盖现有目录/文件。

我尝试过的： 我尝试使用

npm install

与

npm install

标志和

--package-lock-only

（请参阅

add-dependency

）的组合来代替使用 npx add-dependenecies，以查看是否无法修改

package.json

而不是安装直接。

我还尝试在本地运行

npm run build

，并且网站构建没有问题。

有谁知道我可以做出哪些改变来解决这个问题？预先感谢您的任何建议。

Answer 1

我找到了一种在构建过程中安装依赖项的方法。好吧，也许在期间而不是在之前。

我不是运行

npm install

，而是首先通过以下命令添加对

package.json

和

package-lock.json

的依赖项：

• npx add-dependenecies some-package

• npm install some-package --package-lock-only

然后我将

vercel.json

包含在我的存储库的根文件夹中。该文件包含以下内容：

{
  "installCommand": "npm run prebuild"
}  

这允许我的预构建脚本在 Vercel 安装依赖项之前运行（如果您查看构建日志，这实际上是 Vercel 在构建期间所做的第一件事）。

这看起来很老套，我不确定我所做的事情是否会让人不悦。如果有更好的方法欢迎评论或者回复！