2017-05-17 10 views
1

Hy男。だから、今まで私はこれのようにしてきました。 webpackを使用してバンドルファイルを作成し、コードをgithubにプッシュしてHerokuにデプロイします。これがうまくいくには、バンドルファイルをgithubにプッシュする必要がありました。WebpackでHerokuに展開する

今、私はHerokuでwebpackを実行したいと思います。問題は、私のpackage.json内に依存関係とdevDependenciesがあり、Herokuでwebpackを実行したい場合、私は両方をインストールする必要があります。これを行うには、多くのdevDependenciesをdependencieに移動して、Herokuがそれをインストールしてwebpackを実行できるようにする必要があります。

これを行うにはどのような方法が最適ですか?

1)すべてのdevDependを依存関係に移動し、Herokuがファイルをビルドできるようにすれば、何とか後ですべての不必要なdevDependenciesを消去して削除できますか?

2)package.jsonを変更したり、NPM_CONFIG_PRODUCTION = falseに設定して運用環境を無効にしたりせずに行う方法はありますか?

3)npmスクリプトはどのようにこのように見えますか?

4)Herokuにプッシュする最適なパフォーマンスに最適な方法は何ですか?

これはnpm installを使用してインストールするdevDependenciesためには、「開発」を「false」とNODE_ENVにNPM_CONFIG_PRODUCTIONを設定する必要がありますthis guideパー

"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" 
+0

もこの質問には関心がありますが、誰も答えたくありません。 –

答えて

0

私のpackage.jsonファイルです。 Herokuのレビューアプリをガイドとして使用していない場合は、you can set these environment variables via your apps dashboardと思っています。

開示:私はガイドを書いた。

+0

Hy Cycododge、回答ありがとうございます。 NPM_CONFIG_PRODUCTION = falseを設定しないようにホッピングしていました。そうすれば、Herokuは私のdevDependenciesをインストールし、バンドルがビルドされると、それらのインストールされた依存関係はすべて維持されます。何とかそれらをきれいにすることができますか、バンドルが構築された後にアンインストールできますか? –

+0

@ Igor-Vuk NODE_ENVだけを設定して、必要に応じて動作するかどうか確認することができます。そうでなければ、ビルド後に 'node_modules'フォルダを削除するスクリプトを実行できます。 – Cycododge