利用ガイド

Babelツールチェーンには、あなたが「エンドユーザー」であろうと、Babel自体の統合を構築している場合であろうと、Babelを簡単に使用できるようにするツールがいくつかあります。ここでは、それらのツールについて簡単に紹介します。詳細については、ドキュメントの「利用」セクションを参照してください。

フレームワークを使用している場合、Babelの設定は異なるか、実際にはすでに処理されている可能性があります。代わりに、インタラクティブなセットアップガイドを確認してください。

概要

このガイドでは、ES2015+の構文を使用するJavaScriptアプリケーションコードを、現在のブラウザーで動作するコードにコンパイルする方法を説明します。これには、新しい構文の変換と、不足している機能のポリフィルが含まれます。

これをセットアップするプロセス全体には、以下が含まれます。

パッケージをインストールするために次のコマンドを実行します。

npm
Yarn
pnpm

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

yarn add --dev @babel/core @babel/cli @babel/preset-env

pnpm add --save-dev @babel/core @babel/cli @babel/preset-env

プロジェクトのルートに、次の内容でbabel.config.jsonという設定ファイルを作成します（v7.8.0以上が必要です）。
babel.config.json
```
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}
```
上記のブラウザーリストは、単なる任意の例です。サポートするブラウザーに合わせて調整する必要があります。 @babel/preset-envのオプションの詳細については、こちらを参照してください。

または、古いBabelバージョンを使用している場合は、babel.config.jsを使用します。

babel.config.js
const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets };

そして、srcディレクトリからlibにすべてのコードをコンパイルするために、このコマンドを実行します。
Shell
```
./node_modules/.bin/babel src --out-dir lib
```
npm@5.2.0に付属のnpmパッケージランナーを使用して、./node_modules/.bin/babelをnpx babelに置き換えることで、コマンドを短縮できます。

これがどのように機能するかのステップバイステップの説明と、使用される各ツールの紹介については、以下をお読みください。

CLIでの基本的な使用法

必要なすべてのBabelモジュールは、@babel（バージョン7以降）の下にスコープされた個別のnpmパッケージとして公開されています。このモジュール式の設計により、特定のユースケース向けに設計されたさまざまなツールが可能になります。ここでは、@babel/coreと@babel/cliを見ていきます。

コアライブラリ

Babelのコア機能は、@babel/coreモジュールにあります。インストール後

npm
Yarn
pnpm

npm install --save-dev @babel/core

yarn add --dev @babel/core

pnpm add --save-dev @babel/core

JavaScriptプログラムで直接requireして、次のように使用できます。

JavaScript
const babel = require("@babel/core");

babel.transformSync("code", optionsObject);

ただし、エンドユーザーとしては、おそらく@babel/coreへのインターフェースとして機能し、開発プロセスとうまく統合する他のツールをインストールしたいでしょう。それでも、オプションについて学ぶためにドキュメントページを確認することをお勧めします。これらのオプションのほとんどは、他のツールからも設定できます。

CLIツール

@babel/cliは、ターミナルからbabelを使用できるようにするツールです。インストールコマンドと基本的な使用例を次に示します。

npm
Yarn
pnpm

npm install --save-dev @babel/core @babel/cli

./node_modules/.bin/babel src --out-dir lib

yarn add --dev @babel/core @babel/cli

./node_modules/.bin/babel src --out-dir lib

pnpm add --save-dev @babel/core @babel/cli

./node_modules/.bin/babel src --out-dir lib

これにより、srcディレクトリ内のすべてのJavaScriptファイルが解析され、指示した変換が適用され、各ファイルがlibディレクトリに出力されます。まだ変換を適用するように指示していないため、出力コードは入力と同じになります（正確なコードスタイルは保持されません）。オプションとして渡すことで、必要な変換を指定できます。

上記の例では--out-dirオプションを使用しました。--helpを使用して実行することで、cliツールで受け入れられる残りのオプションを表示できます。しかし、私たちにとって最も重要なのは、--pluginsと--presetsです。

プラグインとプリセット

変換はプラグインの形式で行われます。プラグインは、コードへの変換方法をBabelに指示する小さなJavaScriptプログラムです。独自のプラグインを作成して、コードに必要な変換を適用することもできます。 ES2015+構文をES5に変換するには、@babel/plugin-transform-arrow-functionsのような公式プラグインを使用できます。

npm
Yarn
pnpm

npm install --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

yarn add --dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

pnpm add --save-dev @babel/plugin-transform-arrow-functions

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

これで、コード内のすべての矢印関数がES5互換の関数式に変換されます。

JavaScript
const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

それは良いスタートです！しかし、コードには他にも変換したいES2015+機能があります。必要なすべてのプラグインを1つずつ追加する代わりに、プラグインの事前定義されたセットである「プリセット」を使用できます。

プラグインと同様に、必要なプラグインの組み合わせを共有するために、独自のプリセットを作成することもできます。ここでのユースケースでは、envという優れたプリセットがあります。

npm
Yarn
pnpm

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

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

yarn add --dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

pnpm add --save-dev @babel/preset-env

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

設定なしで、このプリセットには、最新のJavaScript（ES2015、ES2016など）をサポートするすべてのプラグインが含まれます。しかし、プリセットはオプションも受け入れることができます。ターミナルからcliオプションとプリセットオプションの両方を渡すのではなく、オプションを渡す別の方法である設定ファイルを見てみましょう。

設定

ニーズに応じて、設定ファイルを使用する方法はいくつかあります。詳細については、Babelを設定する方法に関する詳細ガイドを必ずお読みください。

今のところ、次の内容でbabel.config.jsonというファイルを作成してみましょう（v7.8.0以上が必要です）。

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        }
      }
    ]
  ]
}

これで、envプリセットは、ターゲットブラウザーで利用できない機能の変換プラグインのみをロードします。構文の準備が整いました。次に、ポリフィルを見てみましょう。

ポリフィル

🚨 Babel 7.4.0の時点で、このパッケージは、core-js/stableを直接含める（ECMAScript機能をポリフィルするため）ことが推奨されています。
JavaScript
import "core-js/stable";
ジェネレーターまたはasync関数をES5にコンパイルしていて、@babel/coreまたは@babel/plugin-transform-regeneratorのバージョンが7.18.0より古い場合は、regenerator runtimeパッケージもロードする必要があります。これは、@babel/preset-envのuseBuiltIns: "usage"オプションまたは@babel/plugin-transform-runtimeを使用すると自動的にロードされます。

@babel/polyfillモジュールには、core-jsと、完全なES2015+環境をエミュレートするカスタムのregenerator runtimeが含まれています。

これは、PromiseやWeakMapのような新しい組み込み、Array.fromやObject.assignのような静的メソッド、Array.prototype.includesのようなインスタンスメソッド、およびジェネレーター関数（再生プラグインと組み合わせて使用する場合）を使用できることを意味します。ポリフィルは、これを行うために、グローバルスコープだけでなく、Stringのようなネイティブプロトタイプにも追加します。

ライブラリ/ツールの作成者にとっては、これは多すぎる可能性があります。Array.prototype.includesのようなインスタンスメソッドが必要ない場合は、@babel/polyfillの代わりに変換ランタイムプラグインを使用することで、グローバルスコープをまったく汚染することなく実行できます。

さらに一歩進んで、ポリフィルが必要な機能が正確にわかっている場合は、core-jsから直接それらを要求できます。

アプリケーションを構築しているので、@babel/polyfillをインストールできます。

npm
Yarn
pnpm

npm install --save @babel/polyfill

yarn add @babel/polyfill

pnpm add @babel/polyfill

これはソースコードの前に実行する必要があるポリフィルであるため、--save-devではなく--saveオプションに注意してください。

幸いなことに、envプリセットを使用しています。このプリセットには、"useBuiltIns"オプションがあり、"usage"に設定すると、上記で言及した最後の最適化が事実上適用され、必要なポリフィルのみが含まれます。この新しいオプションを使用すると、設定は次のように変わります。

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

Babelは、ターゲット環境に欠落している機能を求めてすべてのコードを検査し、必要なポリフィルのみを含めるようになります。たとえば、このコード

JavaScript
Promise.resolve().finally();

（Edge 17にはPromise.prototype.finallyがないため）これは次のようになります。

JavaScript
require("core-js/modules/es.promise.finally");

Promise.resolve().finally();

"useBuiltIns"オプションを"usage"に設定したenvプリセットを使用していなかった場合（デフォルトは「false」）、他のコードの前にエントリポイントでフルポリフィルを一度だけrequireする必要がありました。

たとえば、

babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "entry"
      }
    ]
  ]
}

次に、@babel/polyfillが非推奨になっているため、完全なES2015+環境をエミュレートするために、エントリファイルで最初にcore-js（ECMAScript機能をポリフィルするため）をインポートします。

JavaScript
 import "core-js/stable";

まとめ

ターミナルからBabelを実行するために@babel/cliを使用し、すべての新しいJavaScript機能をポリフィルするために@babel/polyfillを使用し、使用する機能とターゲットブラウザーに欠落している機能の変換とポリフィルのみを含めるためにenvプリセットを使用しました。

ビルドシステム、IDEなどでBabelをセットアップする方法の詳細については、インタラクティブなセットアップガイドを確認してください。

概要​

CLIでの基本的な使用法​

コアライブラリ​

CLIツール​

プラグインとプリセット​

設定​

ポリフィル​

まとめ​

概要

CLIでの基本的な使用法

コアライブラリ

CLIツール

プラグインとプリセット

設定

ポリフィル

まとめ