部署React应用至Heroku时遇npm ERR! missing script: build错误求助

我之前部署create-react-app项目到Heroku时也碰到过一模一样的问题，这个错误本质上是Heroku在构建过程中找不到build脚本，没法生成生产环境的静态文件。下面是我总结的排查和解决步骤：

第一步：检查你的package.json配置 #

首先打开项目根目录下的package.json，找到scripts区块，确认里面有build命令：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build", // 这一行必须存在！
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

如果没有build这一行，手动添加进去——这是create-react-app默认自带的脚本，如果你是手动搭建的React项目（不是用create-react-app初始化的），就得自己写对应的build命令（比如用webpack编译的话，可能是"build": "webpack --mode production"）。

第二步：本地验证build命令是否能正常运行 #

在项目根目录执行以下命令，先确保本地能成功生成build文件夹：

npm run build

如果本地运行就报错，那先解决本地的问题（比如缺少依赖、配置错误等），本地能跑通了再部署到Heroku。

第三步：确认项目目录结构和git提交内容 #

• 确保你是在项目根目录执行的git add .和git commit命令，package.json必须在根目录下，不然Heroku找不到它。
• 检查.gitignore文件，虽然不需要提交build文件夹（Heroku会自己构建），但别不小心把package.json或者node_modules之外的关键文件忽略了。

第四步：确认Heroku的buildpack设置正确 #

有时候buildpack可能没设置对，执行以下命令查看当前buildpack：

heroku buildpacks

如果输出不是那套create-react-app的buildpack，重新设置：

heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git

之后再重新提交代码：

git add .
git commit -m "Fix build script and reconfigure buildpack"
git push heroku master

特殊情况：如果你用的是monorepo #

如果你的项目是多包仓库（比如用Lerna或Yarn Workspaces），这套create-react-app的buildpack可能不兼容，这时候建议改用Heroku的官方Node.js buildpack，然后手动配置：

1. 安装serve依赖用来托管静态文件：

npm install --save serve

2. 在package.json里修改scripts：

"scripts": {
  "build": "react-scripts build",
  "start": "serve -s build"
}

3. 设置Node.js buildpack：

heroku buildpacks:set heroku/nodejs

4. 重新提交部署即可。

按照上面的步骤走，基本能解决这个错误。

内容的提问来源于stack exchange，提问作者RobiminusMaximus