Question

嗨伙计们。所以，直到现在我一直这样做。使用webpack创建一个bundle文件，将代码推送到github并部署到Heroku。为此，我必须将捆绑文件推送到github。

现在，我想在Heroku上运行webpack。问题是我在package.json中有依赖项和devDependencies，如果我想在Heroku上运行webpack，我需要同时安装它们。要做到这一点，我必须将很多devDependencies移动到依赖关系，以便Heroku可以安装它并运行webpack。

这样做的最佳方式是什么？

1）如果我将所有devDepend移动到依赖项并让Heroku制作构建文件，我可以以某种方式清理并删除所有不必要的devDependencies吗？

2）有没有办法在不更改package.json或设置NPM_CONFIG_PRODUCTION = false并禁用生产环境的情况下执行此操作？

3）npm脚本如何做到这一点？

4）总而言之，什么是推送到Heroku的最佳性能优化方式？

这是我的package.json文件

"scripts": {
    "clean-client": "rm -rf ./src/dist",
    "clean-server": "rm -rf ./src/build",
    "build-server": "babel src/server -d src/build -s --copy-files",
    "build-client": "webpack -p --config webpack.config.prod.babel.js",
    "start": "set \"NODE_ENV=production\" && npm run build-server && npm run build-client && node ./src/build/index.js",
    "start-dev": "set \"NODE_ENV=development\" && nodemon ./start-dev.js",
    "webpack": "webpack -w --config webpack.config.babel.js",
    "flow": "./node_modules/.bin/flow check",
    "test": "set \"NODE_ENV=test\" && babel-tape-runner -r \"test/setup.js\" \"test/**/*.test.jsx\" | node_modules/.bin/tap-spec",
    "coverage": "babel-node node_modules/babel-istanbul/lib/cli.js cover node_modules/babel-tape-runner/bin/babel-tape-runner -- \"test/setup.js\" -- \"test/**/*.test.jsx\""
  },
  "dependencies": {
    "babel-plugin-react-css-modules": "2.7.0",
    "babel-runtime": "^6.23.0",
    "ejs": "^2.5.6",
    "express": "^4.15.2",
    "prop-types": "^15.5.8",
    "react": "15.5.4",
    "react-dom": "15.5.4",
    "react-router": "3.0.4"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-istanbul": "^0.12.2",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.24.1",
    "babel-tape-runner": "^2.0.1",
    "bootstrap": "v4.0.0-alpha.6",
    "browser-sync": "^2.18.8",
    "browser-sync-webpack-plugin": "^1.1.4",
    "css-loader": "0.28.0",
    "enzyme": "^2.8.2",
    "eslint": "^3.18.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-flowtype": "^2.32.1",
    "eslint-plugin-react": "^6.10.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "flow-bin": "^0.45.0",
    "ignore-styles": "^5.0.1",
    "jquery": "^3.2.1",
    "jsdom": "^10.1.0",
    "jsdom-global": "^3.0.2",
    "node-sass": "^4.5.2",
    "nodemon": "^1.11.0",
    "postcss": "^6.0.1",
    "postcss-cssnext": "2.10.0",
    "postcss-loader": "^2.0.5",
    "postcss-scss": "^1.0.0",
    "react-test-renderer": "^15.5.4",
    "sass-loader": "^6.0.3",
    "sass-resources-loader": "^1.2.1",
    "script-loader": "^0.7.0",
    "sinon": "^2.2.0",
    "sinon-test": "^1.0.2",
    "snazzy": "^7.0.0",
    "standard": "^10.0.2",
    "style-loader": "^0.17.0",
    "tap-spec": "^4.1.1",
    "tape": "^4.6.3",
    "tether": "^1.4.0",
    "webpack": "^2.4.1"

Answer 1

每this guide您必须将NPM_CONFIG_PRODUCTION设置为“false”并将NODE_ENV设置为“development”，以便使用npm install安装devDependencies。如果您不使用Heroku的评论应用程序作为指南，我相信you can set these environment variables via your apps dashboard。

披露：我写了指南。

Answer 2

这个问题有点老了，但希望我的通知可以对某人有所帮助。这是先前建议的解决方案的替代方案（未尝试）。

要直接在heroku上构建项目，只需将构建脚本添加到package.json文件中。

"scripts": {
"build": "webpack --config webpack.config.js",

}，

我有很多devDevependecies，包括webpack-cli，我没有在全球范围内安装。在添加脚本之前，我必须先构建项目并推送，添加之后，我注意到heroku只是自动运行它，并且该过程的输出与本地计算机上的输出相同。这里的关键可能是build关键字!!!

使用Webpack部署到Heroku

2 个答案: