在 Heroku 上使用 Webpack 托管生产 React 应用程序构建答案

【问题标题】：Hosting a production React app built with Wepback on Heroku在 Heroku 上使用 Webpack 托管生产 React 应用程序构建
【发布时间】：2017-06-17 19:40:32
【问题描述】：

每次我推送到 heroku 时，它都会简单地显示“未找到”。我假设是因为 webpack 没有运行？

我尝试了各种脚本：

"scripts": {
  "clean": "rimraf dist",
  "build": "npm run clean && NODE_ENV=production && webpack -p --progress",
  "postinstall": "npm run builds",
  "serve": "webpack-dev-server"
}

还有另一个，只是没有安装后。

带有 postinstall 的那个会给我一个错误，说 webpack 没有安装（保存在我的 devDependencies 下）。在第二个中，我在 Heroku 日志上成功构建，但在加载页面时“未找到”。

【问题讨论】：

标签： heroku webpack

【解决方案1】：

我认为处理这个问题的更好方法是保持package.json 干净，因为 Heroku 使得构建东西变得更加困难，所以只处理那个特定的情况。

我们使用 NPM 安装后挂钩来执行构建任务、为这些任务加载开发依赖项、清理等。

来自package.json 的脚本部分：

"scripts": { 
  "postinstall": "node ./ops/heroku-build.js" 
}

还有heroku-build.js:

'use strict';

if ('HEROKU' in process.env || ('DYNO' in process.env && process.env.HOME === '/app')){

  const pkg = require('../package.json');
  const ChildProcess = require('child_process');


  let deps = pkg.devDependencies;
  let packages = "";

  Object.keys(deps).forEach((key) => {
    packages += `${key}@${deps[key]} `; // note space at end to separate entries
  });

  try {
    console.time("install");
    console.log("starting npm install of dev dependencies");
    ChildProcess.execSync(`npm install ${packages}`);
    console.timeEnd("install");

    console.time("build");
    console.log("starting npm build");
    ChildProcess.execSync(`npm run build:all`);
    console.timeEnd("build");

    console.time("uninstall");
    console.log("starting npm uninstall of dev dependencies");
    ChildProcess.execSync(`npm uninstall ${packages}`);
    console.timeEnd("uninstall");
  }
  catch (err) {
    console.error(err.message);
  }
} else {
  console.log("Not Heroku, skipping postinstall build");
}

这样，如果我们决定在未来部署到 AWS 或其他地方，我们可以单独处理他们环境的特性。

Heroku documentation on how to customize the build process.

【讨论】：

不错，虽然对于刚刚尝试在 Heroku 上启动他的第一个应用程序的人来说有点复杂！
我想这是真的。但是当你开始走 Heroku 的道路时，知道如何处理这些事情永远不会有什么坏处！总体而言，我认为了解 Heroku 构建阶段非常有用。
你可以在没有脚本的情况下做到这一点。我发现解析 package.json 并手动执行 npm 的工作很脆弱，不值得。
@EmileBergeron 请详细说明“你可以在没有脚本的情况下做到这一点。”在一个答案！
@TWiStErRob 很晚，但应该是npm prune --production。 Another answer of mine 在类似的问题上链接到 another Nathan's answer，这让我回到了这里。

【解决方案2】：

您需要将 webpack（以及您在 Heroku 上所需的任何其他依赖项）放在 package.json 中的“依赖项”下，而不是“devDependencies”下。

【讨论】：

这就是我的想法，但我看到很多人将它们置于 devDependencies 之下。你知道这是为什么吗？
Heroku 是一个生产环境。 devDependencies 仅适用于您的开发环境所需的包。您需要包含在 Heroku slug 中的包（包括在 slug 构建阶段所需的包，例如 webpack）需要在您的依赖项中，而不是在 devDependencies 中。您可能会看到有人将 webpack 放在其他平台的 devDependencies 中，但可能不是 Heroku。
但是如果你真的很想在 Heroku 上安装你的 devDependencies（不推荐），你可以通过设置 NPM_CONFIG_PRODUCTION=false 来做到这一点，如下所述：devcenter.heroku.com/articles/nodejs-support#devdependencies
是的，我看到了，但我不想走那条路。只会修复我的依赖项。谢谢！
您总是可以使用postinstall npm 挂钩来运行一个脚本，该脚本可以检查您是否在 Heroku 上（因此它不会在本地或其他地方运行），加载您的开发依赖项，运行您的构建，然后删除开发依赖项。构建需要更长的时间，但停机时间应该没有什么不同，并且您的 package.json 保持干净。这就是我们管理环境的方式，因此我们仍然可以使用来自 GitHub 的自动部署。