Framework7(webpack)の開発環境と本番環境で変数を出し分けする方法

2019年10月14日

「Framework7はwebpackでビルド出来るけど、開発環境と本番環境で変数を出し分けしたい」
「開発環境で使うAPIキーなどは本番環境のビルドしたapp.jsに埋め込みたくない」

こんにちは、タカフです。

Framework7やwebpack等のフロントエンドのビルドシステムを使っていると上記のような悩みはつきものですよね。

短い内容ですが大切な事なので記事にしたいと思います。

結論：Webpack標準のDefinePluginを使う

webpackの公式ページにてDefinePluginの紹介があり、

This can be useful for allowing different behavior between development builds and production builds.
(これは、開発ビルドと本番ビルドの間で異なる動作を許可する場合に便利です。)

と書いてあるのでこれを使いましょう。

こういうライブラリを使う時は「郷に入れば郷に従え」作戦が大抵いい結果になるでしょう。

出し分けするコード

まず、ビルドコマンドで環境変数を渡します。
Framework7のpackage.jsonでは既にNODE_ENVという環境変数をdevelopmentやproductionとして以下のように渡してきています。

"scripts": {
  "build-dev": "cross-env NODE_ENV=development node ./build/build.js",
  "build-prod": "cross-env NODE_ENV=production node ./build/build.js"
}

さらにFramework7では、webpack.config.jsの中に既にDefinePluginを使っている記述がありそこを編集します。

環境変数もenvという定義されているので結論として以下のような記述で分けることが出来ます。

const env = process.env.NODE_ENV || 'development';


module.exports = {
  ...
  plugins: [
    (env === 'production' ?
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env),
        'process.env.TARGET': JSON.stringify(target),
        'API_KEY': "this-is-production-key",
      })
      :
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(env),
        'process.env.TARGET': JSON.stringify(target),
        'API_KEY': "this-is-development-key",
      })
    ),

productionとdevelopmentとキレイに対比できるコードになって良い感じですね。

変数が増えてきたら、Webpack公式で紹介されているwebpack-mergeを使って、webpack.config.js自体を分けていくのもありかと思います。

けど少しの変数で済むなら今回のように一つのwebpack.config.js に書いちゃった方が見やすくてすっきりしますね。

以上、カフーブログの提供でお送りしました。