# Babel 7.4.0で非推奨になった@babel/polyfillを使わず、core-js@3で環境構築する

2019/5/22 公開 JavaScript

@babel/polyfill (opens new window)のページにBabel 7.4.0から非推奨になったと書かれている。

As of Babel 7.4.0, this package has been deprecated

この記事ではwebpack4でBabel7.4を使った環境構築の方法を記載する。

# 環境構築

# インストール

@babel/polyfillではなくcore-jsとregenerator-runtimeをインストールしているのがポイント。
Polyfillはcore-jsにまとめられており、async-awaitを動かすにはregenerator-runtimeが別で必要になる。
そのほか、BabelやWebpackでビルドするために必要なモジュールをインストールする。

npm install --save-dev @babel/core @babel/preset-env core-js regenerator-runtime webpack webpack-cli babel-loader

# packge.json

npm-scriptsにbuildを追加して、npm run build実行時にwebpackのビルドが動くようにする。

package.json

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "core-js": "^3.1.2",
    "regenerator-runtime": "^0.13.2",
    "webpack": "^4.32.1",
    "webpack-cli": "^3.3.2"
  }
}

# webpack.config.jsの作成

webpack.config.jsにwebpack実行時の設定を記載する。
moduleのrulesの中でbabel-loaderの指定をする。

webpack.config.js

const path = require('path');

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "src/index.js"),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
          }
        ]
      }
    ]
  }
};

# babel.config.jsの作成

babel.config.jsにbabelの設定を記載する。
presetsに@babel/preset-envを指定し、オプションにuseBuiltInsおよびcorejsを指定する。
こう設定することにより、ビルドしたJavaScriptファイルで必要なモジュールのみをインポートする。

babel.config.js

module.exports = function (api) {
  api.cache(true);

  const presets = [["@babel/preset-env", {
      useBuiltIns: "usage",
      corejs: 3,
    }]];

  return {
    presets,
  };
}

# テスト用のJavaScriptを用意する

エントリーポイントにするindex.jsを用意する。
Polyfillが含まれることを確認するため、IE11で対応していないArray.prototype.includesを記載する。
さらに、async-awaitが動くことを確認するために、wait関数を用意し、無名関数の中で呼び出す。また、importの確認のためにadd.jsを用意する。

index.js

import add from './add';

console.info(add(2, 3));
console.info(['hoge', 'fuga', 'piyo'].includes('piyo'));

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
(async () => {
  console.log('start');
  await wait(2000);
  console.log('end')
})();

add.js

export default function(a, b) {
  return a + b;
}

# ビルド実行

実行前のディレクトリは以下のとおり。 srcディレクトリ下にエントリーポイントとなるindex.jsと、関数をexportしているadd.jsを配置している。
また、出力先のdistディレクトリを用意している。

.
├── babel.config.js
├── dist
├── package-lock.json
├── package.json
├── src
│   ├── add.js
│   └── index.js
└── webpack.config.js

ビルドを実行すると、distディレクトリにbundle.jsが出力される。

npm run build

出力されたbundle.jsの中をのぞいて見ると、importした/***/ "./src/add.js":や、 Polyfillの"./node_modules/core-js/modules/es.array.includes.js"、そして、async-awaitで必要な/***/ "./node_modules/regenerator-runtime/runtime.js":などが組み込まれていることを確認できる。

・参考
https://babeljs.io/docs/en/next/babel-polyfill.html (opens new window)
https://babeljs.io/blog/2019/03/19/7.4.0 (opens new window)
https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md (opens new window)
https://github.com/babel/babel-loader (opens new window)