Node.jsによるモダンJavaScriptのIE11向けトランスパイル（構成編）

①フォルダの構成
ここで設定したgulpfile.jsファイル

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const newer = require('gulp-newer');
const cached = require('gulp-cached');
const plumber = require('gulp-plumber');
const path = require('path');

const SRC_BASE = 'Scripts';
const SRC_PATTERN = `${SRC_BASE}/**/*.js`;
const DEST_DIR = 'ScriptsDist';

function buildIE11() {
  return src(SRC_PATTERN, { base: SRC_BASE })
    .pipe(plumber())
    .pipe(cached('ie11'))  // 最初にキャッシュ確認
    .pipe(newer(DEST_DIR)) // 変更があったファイルのみ
    .pipe(babel({
      presets: [['@babel/preset-env', {
        targets: { ie: '11' },
        useBuiltIns: 'usage',
        corejs: 3
      }]]
    }))
    .pipe(dest(DEST_DIR));
}

exports['build:ie11'] = buildIE11;

この場合、プロジェクトのフォルダ構成は以下の通りです。

②useBuiltIns設定のあれこれ
●useBuiltIns: 'usage'の場合
この場合はJSファイルごとにIE11向けポリフィルが埋め込まれますので、特に何も追加で用意、設定することはありません。
各JSファイルを個別に読み込む構成や、コードサイズを小さくしたい人むけですね。

●useBuiltIns: 'entry'の場合
この場合は以下のポリフィルが必要です。

import 'core-js/stable';
import 'regenerator-runtime/runtime';

これが無いと、IE11でモダンJavaScript機能が使えるようになりません。
原則各JSファイルの先頭に書く必要があります。

もしくは、例えばpolyfills.jsのように専用のファイルを作成し、そのトランスパイル後のJSファイルを先頭に読み込ませれることも可能です。マスターページなどを設定しているのであれば、マスターページにpolyfills.jsを読み込ませて、コンテンツページにそれ以外のJSファイルを読み込ませれば実現できます。

③コンテンツページへの設置と読み込み
コンテンツページに以下のように各JSファイルを読ませます。例えば、abc.jsの場合は以下です。

   <script type="module" src="<%= this.ResolveClientUrl("/Scripts/abc.js") %>"></script>
   <script nomodule src="<%= this.ResolveClientUrl("/ScriptsDist/abc.js") %>"></script>

※srcの相対パス問題は以下をどうぞ
sasaki816.hatenablog.com

「type="module"」で設定すると、Chromiumブラウザでは正常に処理されますが、IE11では認識できませんので無視されます。
逆に「nomodule」で設定した場合は、Chromiumブラウザでは無視され、IE11でのみ処理される形となります。

これで両方読み込んでもそれぞれのブラウザ環境で片方だけ読まれますので、名前の衝突は発生しません。

次回はこちら。
sasaki816.hatenablog.com

佐々木屋

技術的なことから趣味まで色々書きます

Node.jsによるモダンJavaScriptのIE11向けトランスパイル（構成編）