1. enu-kuro

    Posted

    enu-kuro
Changes in title
+NODE_ENVを使って環境ごとに変数を切り替えてbuildするときに他の環境の変数は見せないようにする方法
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,84 @@
+client sideをReactのようなSingle Page Applicationで開発している場合、ソースコードは自由に閲覧できてしまうため必要ない情報は入れないようにすべきです。
+
+開発環境と本番環境でkeyやurlを切り替え、さらに他の環境のkeyやurlはソースコードに含まれないようにしたかったので方法を調べました。
+
+
+gulpやgruntは使わずにnpmのscriptだけでやってみました。
+
+結論から言うと以下のようなscriptで実現できました。
+
+##npm script
+```
+ "scripts": {
+ "build-production": "NODE_ENV=production browserify app/index.js -t babelify -t envify | uglifyjs -c warnings=false > public/bundle.js",
+ "build-staging": "NODE_ENV=staging browserify app/index.js -t babelify -t envify | uglifyjs -c warnings=false > public/bundle.js",
+ "build-development": "NODE_ENV=development browserify app/index.js -t babelify -t envify | uglifyjs -c warnings=false > public/bundle.js"
+ }
+```
+
+##client side
+ParseSDKのkeyを環境ごとに設定しています。
+build後のファイルには該当する環境以外の部分は含まれません。
+
+```
+if (process.env.NODE_ENV === 'production') {
+ Parse.initialize('production-key1', 'production-key2');
+}else if (process.env.NODE_ENV === 'staging') {
+ Parse.initialize('staging-key1', 'staging-key2');
+}else if (process.env.NODE_ENV === 'development') {
+ Parse.initialize('development-key1', 'development-key2');
+}
+```
+
+##envify
+envifyを使うとnodeの環境変数(process.env.NODE_ENV)を設定したstringsに置き換えてくれます。
+
+
+NODE_ENV=productionとしていた場合に
+
+これが
+
+```
+if (process.env.NODE_ENV === "development") {
+ console.log('development only')
+}
+```
+
+こうなります。
+
+```
+if ("production" === "development") {
+ console.log('development only')
+}
+```
+
+##uglifyjs
+さらにuglifyjsを使うとbuild時に絶対通ることがないコード("if(false)"のような)を削除してくれます。
+
+NODE_ENV= developmentだと削除されませんが
+
+```
+if ("development" === "development") {
+ console.log('development only')
+}
+```
+
+NODE_ENV=productionだと削除されます。
+
+```
+if ("production" === "development") {
+ console.log('development only')
+}
+```
+
+
+##uglifyjsのoption
+
+uglifyjsにはソースの削減に関する様々なオプションがあります。
+
+-cオプションを付けないと上記のような条件判定部分の削除はしてくれませんでした。
+
+optionは細かく設定できるようなので詳細はgithubのreadmeを読んでみてください。
+https://github.com/mishoo/UglifyJS2
+
+-cオプションをつけると削除する部分についてwarningが出力されるのですが、量が多かったのでwarnings=falseで出ないようにしています。