Babelツールチェーンには、あなたが "エンドユーザー "であろうと、Babel自身との統合を構築していようと、Babelを使いやすくしようとする多くのツールがあります。これはこれらのツールの簡単な紹介であり、ドキュメントのUsageセクションで詳細を読むことができます。

フレームワークを使用している場合、Babelの設定は異なる動作をするか、実際にあなたのために処理されるかもしれません。のチェックしてください。

概要

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

すべてのセットアッププロセスには以下が含まれます：

• 以下のコマンドを実行して、パッケージをインストールしてください：

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

• プロジェクトのルート・ディレクトリに、この内容を含むbabel.config.jsonという名前の設定ファイルを作成します：

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

上記のブラウザはあくまで任意の例です。あなたがサポートしたいブラウザに合わせる必要があります。

• で、このコマンドを実行すると、srcディレクトリのすべてのコードがlibにコンパイルされます：

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

  ./node_modules/.bin/babel您可以使用附带的npm包运行器npm@5.2.0通过用npx バベルはコマンドを短縮するために置き換えます。

CLI基本的な

必要なすべてのBabelモジュールは、@Babelの下で別々のnpmパッケージとして公開されています。このモジュール設計により、それぞれが特定のユースケースのために設計された様々なツールを使うことができます。ここで@babel/coreと@babel/cliを見てください。

Core Library(コアライブラリ)

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

npm install --save-dev @babel/core

JavaScriptアプリケーションで直接必要にして、以下のように使用することができます：

const babel = require("@babel/core");
babel.transform("code", optionsObject);

しかし、エンドユーザーとしては、@babel/core のインターフェイスとして機能し、開発プロセスとうまく統合できる他のツールをインストールしたいと思うかもしれません。そのような場合でも、@babel/core のドキュメントページでオプションを確認する必要があるかもしれません。

CLI基本的な

@babel/cliターミナルからbabelを使うためのツールです。以下はインストールコマンドと基本的な使用例です：

npm install --save-dev @babel/core @babel/cli
./node_modules/.bin/babel src --out-dir lib

これは src ディレクトリにあるすべての JavaScript ファイルを解析し、適用するように指示された変換を適用し、各ファイルを lib ディレクトリに出力します。変換を適用するように指示されていないので、出力されるコードは入力と同じになります。希望する変換は、オプションとして渡すことで指定することができます。

上記の--out dirオプションが使用されます。他のオプションはcliツールで--helpを実行すれば見ることができます。しかし、今最も重要なのは--pluginsと--presetsです。

Plugins & Presets

変換はプラグインの形で提供されます。プラグインは、コードに変換を適用する方法を Babel に指示する小さな JavaScript プログラムです。あなたが望むコード変換を適用するために独自のプラグインを書くこともできます。ES2015+の構文をES5に変換するには、@babel/plugin-transform-arrow-functions関数のような公式プラグインに頼ることができます：

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

コード内の矢印関数はすべて、ES5互換の関数式に変換されるようになりました：

const fn = () => 1;
// converted to
var fn = function fn() {
 return 1;
};

これは良いスタートです！しかし、コードには他にも変換が必要なES2015+の機能があります。必要なプラグインを1つずつ追加する代わりに、定義済みのプラグインのセットである "プリセット "を使用します。

プラグインと同じように、独自のプリセットを作成し、必要なプラグインの組み合わせを共有することができます。ここでの使用例では、envという素晴らしいプリセットがあります。

npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

設定はなく、このプリセットにはモダンJavaScriptをサポートするすべてのプラグインが含まれます。しかし、プリセットもオプションです。ターミナルからcliとプリセットの両方のオプションを渡す代わりに、オプションを渡す別の方法を見てみましょう: 設定ファイルです。

構成

設定ファイルを使用するには、ニーズに応じていくつかの異なる方法があります。詳細については、Babel方法に関する詳細なガイドを読んでください。

次に、babel.config.jsonというファイルを作成します：

const presets = [
 [
 "@babel/env",
 {
 targets: {
 edge: "17",
 firefox: "60",
 chrome: "67",
 safari: "11.1",
 },
 },
 ],
];
module.exports = { presets };

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

Polyfill(ポリフィル)

Babel 7.4.0 で、このパッケージは非推奨となり、代わりに core-js/stable と regenerator-runtime/runtime を直接含んでいます：

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

babel/polyfillモジュールは、完全なES2015+環境をエミュレートするために、core-jsとカスタム再生成ランタイムを含んでいます。

Array.prototype.includesつまり、PromiseやWeakMapのような新しい組み込み関数、Array.fromやObject.assignのような静的メソッド、 , のようなインスタンスメソッド、そしてジェネレーター関数を使用することができます。これを実現するために、ポリフィルはグローバルスコープとネイティブプロトタイプを追加します。

ライブラリやツールの作者にとって、それはおそらく多すぎることでしょう。もしArray.prototype.includesのようなものが必要なければ、@babel/polyfillの代わりにtransform runtime使うことで、グローバルスコープを全く汚さずに済みます。

さらに、ポリフィルが必要な機能がはっきりしていれば、regenerator runtime直接要求することもできます。

npm install --save @babel/polyfill

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

幸いなことに、envプリセットを使用すると、"useBuiltIns "オプションがあります。"use "に設定すると、実際に必要なポリフィルだけを含む、前述の最後の最適化が適用されます。この新しいオプションで、設定の変更は次のようになります：

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

Babelはあなたのコードに欠けている機能をチェックし、必要なポリフィルだけをインクルードします：

Promise.resolve().finally();

Edge 17にはPromise.prototype.finallyがないので）次のようになります。

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

envプリセットを使用せず、"useBuiltIns "オプションを "usage "に設定した場合、他のコードで一度だけエントリーポイントで完全なポリフィルを行う必要があります。

要約

ターミナルから babel を実行するには @babel/cli を使い、JavaScript の新機能をすべてポリフィルするには @babel/polyfill を使い、ターゲットブラウザで使用される機能および不足する機能の変換とポリフィルのみを含めるには env プリセットを使います。

ビルド・システムやIDEなどを使ったBabelのセットアップの詳細については、以下の対話型セットアップ・ガイドを参照してください。