FRINGE

HoteKanの開発担当者です。

FRINGEではfirebaseを良く使っています。バックエンドを気にせず高速開発できるのが魅力です。
そんなfirebaseですが、Javascript SDKのバージョン6.0.0以降は古いブラウザへの対応が無くなりました。

各自が必要なポリフィルを利用して必要なブラウザ対応をする必要があります。
必要なポリフィルや対応が必要なブラウザはfirebaseのサポートページに書いてあります。

IE11に対応するにはポリフィルが必要です。
以下ではbabelを使った通常のトランスパイルの方法とvueプロジェクトでの場合の設定を書いています。

babelを使ってIE11対応

サポートページによれば必要なのはES Stableとfetchです。
ES Stableには非常に多くのポリフィルが含まれているのでサポートでも推奨されている@babel/preset-envを使います。

useBuiltIns: 'usage'を使うことで必要なポリフィルだけが読み込まれて効率的です。

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
      },
    ],
  ],
};

.browserlistrcは必要な環境に合わせて設定します。

# .browserslistrc
last 2 versions
not ie <= 10

firebase functionsを使う場合fetchのポリフィルも必要です。
babelはECMAScriptが対象なので、WHATWGで定められているfetchは含まれていません。

fetchのポリフィルはhttps://github.com/github/fetchか、polyfill.ioを使って読み込みます。

vue + firebase の場合

vue cliで作ったプロジェクトであればすでにbabelが設定されています。
但し、デフォルトではnode_modules内のファイルはトランスパイルの対象外なので、トランスパイルが必要なパッケージは設定が必要です。

// vue.config.js
module.exports = {
  transpileDependencies: ['firebase', '@firebase'],
}

.browserlistrcは必要な環境に合わせて設定します。

fetchのポリフィルは上と同じです。

「Uncaught ReferenceError: exports is not defined」が出た場合

上記の設定だとトランスパイルはできるのですが、実行時に以下のエラーが出てしまいます。

Uncaught ReferenceError: exports is not defined

これはbabelがデフォルトではECMAScriptのモジュール形式（import/export）を想定しているのに対して、firebaseの一部はcommom.js形式で書かれているためです。

そこでbabelの設定を以下のようにしてfirebaseの場合だけ、スクリプトから形式を判定するようにします。

module.exports = {
  // babel.config.js
  overrides: [
    {
      test: './node_modules/firebase',
      sourceType: 'unambiguous',
    },
    {
      test: './node_modules/@firebase',
      sourceType: 'unambiguous',
    },
  ],
};