WebサービスでFirebaseを使う場合、Firebase SDKの初期設定をする必要がある
こういうやつ
const firebaseConfig = { apiKey: "abcdefghijklmnopqrstuvwxyz1234567890ABC", authDomain: "YOUR-PROJECT-NAME.firebaseapp.com", databaseURL: "https://YOUR-PROJECT-NAME.firebaseio.com", storageBucket: "YOUR-PROJECT-NAME.appspot.com", messagingSenderId: "999999999999" };
ただ、この設定は本番環境/検証環境ごとに異なるため、環境に応じて設定値を変更する必要がある
そこで、webpackのDefinePluginを使う
DefinePlugin
DefinePlugin
を使うとコンパイル時にグローバル定数を設定できる
使い方はこんな感じ
new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), VERSION: JSON.stringify('5fa3b9'), BROWSER_SUPPORTS_HTML5: true, TWO: '1+1', 'typeof window': JSON.stringify('object'), 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) });
console.log('Running App version ' + VERSION); if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');
文字列として扱うためには'"production"'
とするか、JSON.stringify('production')
をする
これを利用して
new webpack.DefinePlugin({ ... __FB_API_KEY__: JSON.stringify("abcdefghijklmnopqrstuvwxyz1234567890ABC"), __FB_AUTH_DOMAIN__: JSON.stringify("YOUR-PROJECT-NAME.firebaseapp.com"), __FB_DATABASE_URL__: JSON.stringify("https://YOUR-PROJECT-NAME.firebaseio.com"), __FB_STORAGE_BUCKET__: JSON.stringify("YOUR-PROJECT-NAME.appspot.com"), __FB_MESSAGING_SENDER_ID__: JSON.stringify("999999999999"), ... });
const firebaseConfig = { apiKey: __FB_API_KEY__, authDomain: __FB_AUTH_DOMAIN__, databaseURL: __FB_DATABASE_URL__, storageBucket: __FB_STORAGE_BUCKET__, messagingSenderId: __FB_MESSAGING_SENDER_ID__, appId: __FB_APP_ID__, };
eslintに引っかからないようにする
DefinePlugin
を使ってコンパイル時にグローバル定数が設定できるようになったが、eslintでno-undef
エラーが発生する
そこで、.eslintrc
のglobals
にも設定する
https://eslint.org/docs/user-guide/configuring#specifying-globals
"globals": { "__FB_API_KEY__": "readonly", "__FB_AUTH_DOMAIN__": "readonly", "__FB_DATABASE_URL__": "readonly", "__FB_STORAGE_BUCKET__": "readonly", "__FB_MESSAGING_SENDER_ID__": "readonly", "__FB_APP_ID__": "readonly" },