找不到Webpack,部署到Heroku

Question

非常新的Node和部署到Heroku.我有一个基本的React应用程序设置,我正在尝试部署到Heroku.我推了它,但应用程序失败了.当我查看日志时,我看到了一些内容sh: 1: webpack: not found(完整记录在这里)

我不确定发生了什么,但是相信它与我的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"
    }
}

我做错了什么来部署这个？在我的localhost上工作得很好.但无法弄清楚如何将这一点融入到我的生活中.非常感谢!

Answer 1

好的 - 这与package.json中的devDependencies和Dependencies有关.另外,通过设置Heroku配置,NPM_CONFIG_PRODUCTION: false我能够解决这个问题.互联网!

Answer 2

正如其他人所说,Heroku将节点作为生产运行NODE_ENV=production,这意味着您的devDependencies不会安装.Heroku提供了特定于节点的构建挂钩.我heroku-prebuild用来运行npm install --dev,它安装所有依赖项和devDependencies.

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

应该避免在生产模式下运行您的应用程序.开发人员经常使用"开发模式"特定代码,在生产中运行时会被过滤掉.另外,如果你正在做一个webpack构建的东西,你肯定希望处于生产模式,以利用缩小,丑化等.

以下是Heroku的详细信息.

有时,开发人员需要的东西比package.json中的预安装和postinstall挂钩更面向生产.例如,某些应用程序需要在安装依赖项之前设置额外的身份验证.有些需要构建资产,但不是在开发环境中.进一步的例子可以在关于GitHub的讨论中找到.

Node.js开发人员现在可以使用heroku-prebuild和heroku-postbuild钩子来定制构建过程到他们的应用程序.

https://devcenter.heroku.com/changelog-items/844

Answer 3

发生这种情况是因为默认情况下heroku没有安装dev.dex的开发依赖关系,我们需要通过默认情况告诉heroku(npm)安装我们的dev依赖项(webpack在dev中),所以运行这个命令应该解决"未找到的问题"

.

npm install --dev