前提

Babel6系でES2015のJSをBrowserifyを使用してコンパイルします。

願い

JSをコンパイルする際、Ajax通信で使用するURIを開発と本番で分けたい場面がありました。

なので以下の様なことがしたい。

let uriPrefix = '/api';

if (process.env.APP_ENV === 'production') {
  uriPrefix = '/api/production';
}

export const apiUri = `${uriPrefix}/get/sushi`;

ただ、普通にやると process.env.APP_ENVなんてブラウザに存在しないのでundefinedとなってしまう。

やり方

Babelのプラグインであるbabel-plugin-transform-inline-environment-variables を使用します。

babel/packages/babel-plugin-transform-inline-environment-variables at master · babel/babel · GitHub

プラグインの導入方法はよしなに。

ひとまず必須なのはプラグインのインストール。以下のコマンドを叩く。

$ npm i babel-plugin-transform-inline-environment-variables --save-dev

その後、それぞれのコンパイル方法でプラグインを指定する。

以下はGulpを使用した場合の例です。

import gulp       from 'gulp';
import browserify from 'browserify';
import source     from 'vinyl-source-stream';

gulp.task('js', () => {
  browserify
    .transform(babelify, {
      entries: ['js/app.js'],
      presets: ['es2015'],
      plugins: ['transform-inline-environment-variables']
    })
    .bundle()
    .pipe(source('main.js'))
    .pipe(gul.dest('./public/js'));
});

こうすることでprocess.envが参照できるようになります。

ぐう便利！！！