https://uga-box.hatenablog.com/entry/2020/01/26/000000

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を使う

webpack.js.org

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"
  },