Node.js 找不到网页包，正在部署到Heroku

非常新的节点和部署到Heroku。我已经设置了一个基本的React应用程序，正在尝试部署到Heroku。我已将其推送，但应用程序正在失败。当我查看日志时，我看到一些关于

sh:1:webpack:notfound

（完整日志）的信息

我不确定到底发生了什么，但我相信这与我的package.json有关？我使用的初学者模板如下所示：

{
    "name": "express-react-redux-starter",
    "version": "1.0.0",
    "description": "Starter for Express, React, Redux, SCSS applications",
    "scripts": {
      "dev": "webpack-dev-server --config ./webpack/webpack-dev.config.js --watch --colors",
      "build": "rm -rf dist && webpack --config ./webpack/webpack-prod.config.js --colors",
      "start": "PORT=8080 node start ./server.js",
      "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
      "test:watch": "npm run test -- --watch",
      "lint": "eslint src test webpack"
    },
    "keywords": [
      "ExpressJS",
      "ReactJS",
      "Redux",
      "React hot loader",
      "React Router",
      "SCSS",
      "Webpack Devevelopment configuration",
      "Webpack Production configuration",
      "Airbnb Eslint",
      "pm2",
      "mocha",
      "chai"
    ],
    "repository": {
      "type": "git",
      "url": "git+https://github.com/DimitriMikadze/express-react-redux-starter"
    },
    "author": "Dimitri Mikadze",
    "license": "MIT",
    "devDependencies": {
      "autoprefixer": "^6.4.0",
      "autoprefixer-loader": "^3.2.0",
      "babel-core": "^6.8.0",
      "babel-loader": "^6.2.4",
      "babel-preset-es2015": "^6.6.0",
      "babel-preset-react": "^6.5.0",
      "babel-preset-stage-1": "^6.5.0",
      "chai": "^3.5.0",
      "chai-jquery": "^2.0.0",
      "css-loader": "^0.23.1",
      "eslint": "^2.10.2",
      "eslint-config-airbnb": "^9.0.1",
      "eslint-plugin-import": "^1.8.0",
      "eslint-plugin-jsx-a11y": "^1.2.0",
      "eslint-plugin-react": "^5.1.1",
      "extract-text-webpack-plugin": "^1.0.1",
      "html-webpack-plugin": "^2.16.1",
      "jquery": "^2.2.3",
      "jsdom": "^9.0.0",
      "mocha": "^2.4.5",
      "node-sass": "^3.7.0",
      "react-addons-test-utils": "^15.0.2",
      "react-hot-loader": "^1.3.0",
      "sass-loader": "^3.2.0",
      "style-loader": "^0.13.1",
      "url-loader": "^0.5.7",
      "webpack-dev-server": "^1.14.1"
    },
    "dependencies": {
      "classnames": "^2.2.5",
      "express": "^4.13.4",
      "lodash": "^4.15.0",
      "react": "^15.0.2",
      "react-dom": "^15.0.2",
      "react-redux": "^4.4.5",
      "react-router": "^2.4.0",
      "redux": "^3.5.2",
      "webpack": "^1.13.0"
    }
}

我做了什么错误的部署了这个？在我的本地主机上工作得很好。但我想不出如何让这件事发生在我的生活中。非常感谢

Ok——这与package.json中的devdependency和dependency有关

---

另外，通过将Heroku配置设置为

NPM\u config\u PRODUCTION:false

，我能够解决这个问题。Thx互联网

之所以会发生这种情况，是因为heroku默认不安装package.json的开发依赖项，我们需要特意告诉heroku（npm）安装我们的开发依赖项（webpack位于dev中），因此运行此命令应该可以解决问题 “未找到问题”

---

导致这种情况的原因是未安装

devdependency

。您可以通过在项目的根目录中键入以下命令来克服此问题：

heroku config:set NPM_CONFIG_PRODUCTION=false

---

然后，下一次部署应用程序时，您的问题应该得到解决。

正如其他人所说，Heroku以production

node_ENV=production运行node，这意味着您的devdependency没有安装。Heroku提供了特定于节点的构建挂钩。我使用
heroku prebuild
运行
npm安装--dev
，它安装所有依赖项和devdependency

"scripts": {
  ...,
  "heroku-prebuild": "npm install --dev",
  ...
},

可能应该避免在非生产模式下运行应用程序。开发人员通常有特定于“开发模式”的代码，这些代码在生产环境中运行时会被过滤掉。另外，如果你正在制作一个网页包，你肯定希望处于生产模式，以利用小型化、丑陋化等优势

以下是Heroku提供的详细信息

有时，开发人员需要的是比产品更面向生产的东西
在package.json中预安装和后安装挂钩。例如，一些
应用程序需要在安装前设置额外的身份验证
依赖关系。有些需要建立资产，但不是在开发中
环境更多的例子可以在关于
GitHub

Node.js开发人员现在可以使用heroku预构建和heroku后构建
钩子可以根据应用程序定制构建过程

该行为于2018年3月1日发生变化：

它将安装
devdependency
，但也会在部署过程中删除它们。可以通过heroku config:set NPM\u config\u PRODUCTION=false跳过修剪。这仍然将
NODE\u ENV
设置为
production
我误解了这个问题，因此她对纱线用户：

"heroku-prebuild": "yarn install --production=false"

问题不在于随后根据docu（至少对于npm）进行的修剪，而在于解释节点_ENV并仅在预构建阶段安装生产依赖项

要强制纱线“监督”env变量，必须给出
--production=false
标志。看

注意如评论中所述，在生产环境中安装开发依赖项从来都不是一个好主意。这仅在排除部署问题时才有意义。
正如其他人所说，Heroku将在运行指定的package.json脚本之前删除devdependency以启动应用程序

我仍然希望Heroku删减devdependency，因为这些包在生产过程中并不需要，只是在构建过程中需要。Heroku提供了一个我能够利用的平台，以达到预期的效果

"scripts": {
  "heroku-prebuild": "npm install --dev",
  "build": "webpack --mode production",
  "start": "node src/app.js",
}

预构建将安装dev依赖项，然后构建脚本将简单地使用这些dev依赖项来生成webpack包。之后，在运行开始脚本之前，将定期为生产修剪devdependency。
这就是它对我的作用

heroku buildpacks:add--index 1 heroku/nodejs
NPM_CONFIG_PRODUCTION:false，为什么要这样做？默认情况下，heroku将安装依赖项，而不是devdependency。另外，webpack dev server不适用于生产。heroku config:set NPM_config_production=false是此建议的语法。花2.5小时检查和反复检查，直到意识到webpack是devDependencies，所以在推送到slug之后，它被删除，并且没有生成任何内容。非常感谢。Heroku的文档声明“默认情况下，Heroku将安装dependencies和devDependencies下package.json中列出的所有依赖项。”（）这是过时的还是完全错误？@DanielM根据我的测试，似乎主文件夹中的这段文档是正确的。假设使用express和babel将服务器代码放在根目录下。在部署中，将安装所有DEP，并且服务器将成功编译。当您将文件夹切换到另一个install+build（如'cd client&&npm install&&npm run build）时，会出现此问题。这种情况下，安装与文档不符，只安装生产部门。添加--dev标志确实为我解决了这个问题；查看my repo以获得一个实际示例。这是一个更好的解决方案。虽然这将安装devdependences，但在非生产环境中部署应用程序可能会导致其他问题。真正需要做的是，您需要告诉heroku安装devdependency，这可以使用package.json文件中的
heroku prebuild
脚本来完成（请参阅我的答案）。是的@thisismydesign，它位于
package.json
的“脚本”部分，尽管它仍然没有多大意义。您不想在生产环境中使用开发人员依赖项，您只想运行webpack。请不要这样做。许多开发人员依赖项在生产中成为漏洞。请不要这样做。许多开发人员依赖项在生产中成为漏洞。
"scripts": {
  "heroku-prebuild": "npm install --dev",
  "build": "webpack --mode production",
  "start": "node src/app.js",
}