ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  JavaScript, ツール/ライブラリ 投稿者:mori-dev

Webpack で git 管理してもよいような環境ごとに値の異なる定数を設定する方法

です。仕事でのちょっとしたコミットをブログ記事化するシリーズです。今日は Webpack の話題です。

課題

環境ごとに値の異なる定数として、git で管理できるものと git で管理すべきではないものがあります。後者は dotenvWebpack の DefinePlugin で実現できます。git で管理してよいような、環境ごとに値の異なる定数はどう扱えばよいのでしょうか。

答案

webpack-merge で環境ごとに設定ファイルを分離して、Webpack の DefinePlugin と組み合わせてみました。webpack-merge の smartStrategy で plugins 欄の扱いをコントロールします。

production 環境でだけ違う値を使いたい場合は、webpack.config.base.js の値を webpack.config.production.js の値で上書きできるように設定した上で、webpack.config.base.js でデフォルト値を指定して、webpack.config.browser.production.js で production 用の値を指定します。以下は webpack.config.browser.production.js の例です。

const config = merge.smartStrategy({
plugins: ‘prepend’ // DefinePlugin の base の値を上書きできるようにする
})(baseConfig, {優先される設定})

module.exports = config;

補足

flowtype 対策が必要かもしれません。たとえば APP.HOGE という定数だとすると、decls/my_app_types.js に `declare var APP: Object;` と記述します。
eslint 対策が必要かもしれません。たとえば APP.HOGE という定数だとすると、.eslintrc.yaml に以下のように記述します。ワードプレスの引用記法では、インデントが崩れている点はご注意下さい。

globals:
APP: true

テストが落ちないようにする必要もあります。たとえば APP.HOGE という定数だとすると、 test/util/global.js に以下のように書いた上で、

global.APP = {
‘HOGE’: ‘3000’,
}
export default global;

次のように呼び出しておきます。

/* eslint-disable no-unused-vars */
import global from ‘../util/global’;

環境

  • webpack v2.3.3
  • webpack-merge v4.1.0

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。

PHPエンジニア
Rubyエンジニア
フロントエンドエンジニア
インフラエンジニア
新卒エンジニア
その他採用情報

関連記事

thumbnail
redux-persist でブラウザストレージに一部のデータを保存しつつ、ストアに復旧するまで render を防ぐには

森です。 課題 redux-persist を使っていて、ブラウザリロード時にブラウザストレージからストアにデータを復旧する前に render されるのを防ぎたい。ストアに値があることが前提のコンポーネントでエラーになるから。公式ドキュメントとしてレシピがあっ …

thumbnail
手軽に美しく実装!ファイルアップロード用JavaScriptライブラリ4選

ランサーズでは、現在、Webエンジニアを募集しています。 詳しくは、募集要項をご覧下さい。 こんにちは、keiです。 今回は、ブラウザからのファイルアップロードを実装する際に、お勧めなJavaScriptライブラリを4つご紹介致します。 ランサーズ上で、大容量 …

TestCafeでのE2EテストをBrowserStackでやろう

ランサーズCTOの横井です。 最近、個人でE2Eの画面テストを書く際にSeleniumからTestCafeに乗り換えつつあります。導入が(個人的には)Seleniumより楽っていうのと、要素の出現とかをよしなに待ってくれるので、テスト書くときにあんまりその辺を …