Node.jsによるモダンJavascriptのIE11向けトランスパイル（導入編）

そろそろES6＋に手を出そうと思ったけど、結局現場ではまだまだIEモードが手放せていない現実があります。
技術者としても新しい手順、作法に触れたい気持ちもあり、ChromiumとIE11と両方両立できるようトランスパイルしようと思います。

①Node.jsのインストール
公式サイトからインストーラを取得できます：
https://nodejs.org/ja

LTS（推奨版）を選んでください。
インストール後に以下コマンドでバージョンが表示されればＯＫです。

node -v
npm -v

②npm必要パッケージのインストール
●npmの初期化

npm init -y

●必要なパッケージのインストール
以下はあくまで例です。gulpを実行するjsに応じて適当に増減してください。

npm install --save-dev gulp gulp-babel @babel/core @babel/preset-env gulp-newer gulp-cached gulp-plumber core-js

③設定ファイルを作成
これらの設定ファイルは、すべて対象プロジェクトフォルダに入れて下さい。

●package.json
.babelrcを作成してもいいですが、package.jsonに含めることができて、その方が作成すべき総ファイル数が少なくて済みますのでおすすめです。

{
  "scripts": {
    "build:ie11": "gulp build:ie11"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "ie": "11"
          },
          "useBuiltIns": "entry",
          "corejs": 3
        }
      ]
    ]
  }
}

なお、他の開発者と環境を統一したい場合は以下も含めて書くようにします。

"devDependencies": {
  "@babel/core": "^7.27.1",
  "@babel/preset-env": "^7.27.2",
  "core-js": "^3.42.0",
  "gulp": "^4.0.2",
  "gulp-babel": "^8.0.0",
  "gulp-newer": "^1.4.0",
  "gulp-plumber": "^1.2.1"
  }

●gulpfile.js
これも一例です。高速に処理させるため、変更があったファイルのみ更新するようにしています。
Scriptsフォルダにある.jsファイルすべてが対象となり、ScriptsDistフォルダへIE11向けのファイルが出力されます。

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;

また、Babelの useBuiltInsの設定は「entry」と「usage」の二つあり、以下の特性があります。
構成に応じて変更してください。

構成	useBuiltIns設定値
JSをバンドルしている	entry
JSをバンドルしていない	usage

次は構成編です。
sasaki816.hatenablog.com

佐々木屋

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

Node.jsによるモダンJavascriptのIE11向けトランスパイル（導入編）