NODE_ENVを使って環境ごとに変数を切り替えてbuildするときに他の環境の変数は見せないようにする方法

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');
}

Scriptの説明

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で出ないようにしています。