Help us understand the problem. What is going on with this article?

@babel/preset-envのuseBuiltInsを使ってpolyfillする

More than 1 year has passed since last update.

@babel/preset-envのuseBuiltInsに関する記事です。
Babel v7以降で使えるようになるpolyfillを自動補完してくれる機能について紹介します。

更新(2018/08/27)

2018/08/27にBabel v7が正式リリースされました🎉
https://babeljs.io/blog/2018/08/27/7.0.0

Babel v7

@babel/polyfill

  • babelは文法の変換のみ。ブラウザによっては使えない機能はあります。
  • 例えば、IEはPromiseとかSymbolとか使えません。これは文法ではなく、機能です。
  • @babel/polyfillを使えばその辺の穴埋め(polyfill)をしてくます。
  • ソースコードを直接改変する必要があり。以下のようにpolyfillをimportしなければいけません。
import "@babel/polyfill"

@babel/plugin-transform-runtime

  • こちらもpolyfillするbabelのプラグイン
  • babel-polyfillとは違いimportを書く必要がない。babelの設定に追加するだけ
  • babelのプラグインなので変換時にpolyfillします
  • 指定したブラウザとか関係なく問答無用で変換する。ようするにchromeには既に実装済の機能でChromeの最新バージョンに合わせて変換してもChromeがネイティブ対応済のものまでpolyfillします

求めているもの

  • polyfillのためにimportを書いたり、polyfill用のパッケージをインストールしたくない
  • 指定したブラウザやバージョンに無い機能だけpolyfill入れてほしい

@babel/preset-env

  • babel 6の頃はbabel-preset-envだった
  • 指定したブラウザやNodeのバージョンに合わせてネイティブサポートしていない文法のみ変換
  • cssのAutoprefixerのようにbrowserslistを使って文法の変換を行う
  • 上記で書いた「求めているもの」を叶えてくれる優れもの

Install

まずは@babel/preset-envのインストール方法

npm install --save-dev @babel/preset-env

useBuiltIns: "usage"オプション

  • polyfillのための@babel/polyfillのインストールが不要
  • 指定したブラウザやバージョンに合わせて必要なpolyfillだけをimport

@babel/polyfillとbabel-plugin-transform-runtimeのいいとこどり!

Babel v6のbabel-preset-envのpolyfill

useBuiltInsオプションは1.x系からありました。

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "ie": 11
        },
        // trueにすることで必要なpolyfillだけをimportするようにします
        "useBuiltIns": true
      }
    ]
  ]
}
  • 必要なpolyfillのみインポート
  • ただし前述の通り@babel/polyfillをimportしなければいけません。

イメージ的には以下のように@babel/polyfillをimportするコードが必要な分のpolyfillをimportするコードに変換されます

import "@babel/polyfill";

require("babel-polyfill/lib/core-js/modules/es6.promise");

Babel v7の@babel/preset-envからのpolyfill

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "ie": 11
        },
        // 必要な分だけのpolyfillを自動でインポート
        "useBuiltIns": "usage"
      }
    ]
  ]
}
  • @babel/polyfillの別途インストールが不要
  • @babel/polyfillをインポートするコードが不要
  • usageにしてbabelを実行すると勝手に以下ような必要な分だけpolyfillが埋め込まれる

これが自動でコード内に挿入される

require("babel-polyfill/lib/core-js/modules/es6.promise");

開発者はpolyfillいるかいらないか気にしなくてよいようになります

注意

場合によっては別途polyfillが必要だったりもするので万能ではない
以下のような実行しないと型がわからない場合とかは自動でpolyfillできません
そういった場合は必要なpolyfillをimportする必要があります

users.includes("hoge")

GitHubにサンプル置いときました!

shisama/babel-preset-env-useBuiltIns-sample
npm updateしてnpm run buildすれば以下のトランスパイルした結果を出力
- Node.js(4/6/8)
- chrome(v60/v50)
- firefox(v55/beta)
- Safari
- Edge
- IE11

まとめ

  • babelは文法の変換だけ
  • polyfillは@babel/preset-envで "useBuiltIns": "usage" すればどのpolyfillが必要か考えなくてよくなるし、不要なpolyfillは入らない

最後までお読みいただきありがとうございました。質問や不備がございましたらコメント欄またはTwitter(@shisama_)までお願いいたします。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした