Babeljs-overview

BabelJS-概要

*BabelJS* は、新しい機能を古い標準に変換するJavaScriptトランスパイラーです。 これにより、新旧両方のブラウザで機能を簡単に実行できます。 オーストラリアの開発者、セバスチャン・マッケンジーはBabelJSを始めました。

BabelJSを選ぶ理由

JavaScriptは、ブラウザが理解できる言語です。 Chrome、Firefox、Internet Explorer、Microsoft Edge、Opera、UCブラウザーなど、さまざまなブラウザーを使用してアプリケーションを実行します。 ECMAスクリプトはJavaScript言語仕様です。 ECMA Script 2015 ES5は、すべての新旧ブラウザーで正常に動作する安定したバージョンです。

ES5の後、ES6、ES7、およびES8ができました。 すべてのブラウザで完全にサポートされていない多くの新機能を備えたES6がリリースされました。 ES7、ES8、およびESNext（ECMAスクリプトの次のバージョン）にも同じことが当てはまります。 現在、すべてのブラウザがリリースされたすべてのESバージョンと互換性を持つことが可能になるかどうかは不明です。

ES6またはES7またはES8の機能を使用してコードを記述する場合、新しい変更のサポートが不足しているため、一部の古いブラウザーでは破損する傾向があります。 したがって、コードでECMAスクリプトの新機能を使用し、使用可能なすべてのブラウザーで実行する場合、ES5で最終コードをコンパイルするツールが必要です。

*Babel* は同じことを行い、必要なECMAスクリプトバージョンのコードをトランスパイルするトランスパイラーと呼ばれます。 プリセットやプラグインなどの機能があり、コードを変換するために必要なECMAバージョンを構成します。 Babelを使用すると、開発者はJavaScriptの新機能を使用してコードを記述できます。 ユーザーは、Babelを使用してコードを変換できます。コードは後で問題なくブラウザで使用できます。

次の表に、ES6、ES7、およびES8で使用可能な機能を示します-

Features	ECMA Script version
Let + Const	ES6
Arrow Functions	ES6
Classes	ES6
Promises	ES6
Generators	ES6
Iterators	ES6
Modules	ES6
Destructuring	ES6
Template Literals	ES6
Enhanced Object	ES6
Default, Rest & Spread Properties	ES6
Async - Await	ES7
Exponentiation Operator	ES7
Array.prototype.includes()	ES7
String Padding	ES8

BabelJSは、次の2つの部分を管理します-

• トランスパイリング
• ポリフィリング

Babel-Transpilerとは何ですか？

Babel-transpilerは、最新のJavaScriptの構文をフォームに変換します。これは、古いブラウザーでも簡単に理解できます。 たとえば、矢印function、const、letクラスはfunction、varなどに変換されます。 ここで、構文、つまり矢印関数は、両方の場合で機能を同じに保ちながら通常の関数に変換されます。

Babel-polyfillとは何ですか？

Promise、Maps、Includeなどの新しい機能がJavaScriptに追加されています。 この機能はアレイで使用できます。同様に、使用してbabelを使用してトランスパイルしても変換されません。 新しい機能がメソッドまたはオブジェクトである場合、Babel-polyfillとトランスパイルを使用して、古いブラウザーで機能させる必要があります。

JavaScriptで利用可能なECMAスクリプト機能のリストを次に示します。これらの機能は、変換およびポリフィルできます-

• クラス
• デコレータ
• Const
• モジュール
• 破壊する
• デフォルトのパラメーター
• 計算されたプロパティ名
• オブジェクトのレスト/スプレッド
• 非同期関数
• 矢印関数
• 残りのパラメーター
• スプレッド
• テンプレートリテラル

ポリフィル可能なECMAスクリプト機能-

• 約束
• Map
• Set
• シンボル
• 弱マップ
• 弱点
• 含む
• Array.from、Array.of、Array＃find、Array.buffer、Array＃findIndex
• Object.assign、Object.entries、Object.values

BabelJSの機能

このセクションでは、BabelJSのさまざまな機能について学習します。 以下はBabelJSの最も重要なコア機能です-

Babel-Plugins

プラグインとプリセットは、Babelがコードをトランスパイルするための設定の詳細です。 Babelは、コードが実行される環境がわかっている場合、個別に使用できる多数のプラグインをサポートしています。

バベルプリセット

Babelプリセットはプラグインのセットです。つまり、Babelに特定のモードでトランスパイルするように指示するbabel-transpilerの構成詳細です。 コードを変換する環境を持つプリセットを使用する必要があります。 たとえば、_es2015_プリセットはコードを_es5_に変換します。

バベルポリフィル

メソッドやオブジェクトのようないくつかの機能がありますが、これらは変換できません。 このような場合、babel-polyfillを使用して、任意のブラウザーで機能の使用を促進できます。 約束の例を考えてみましょう。この機能が古いブラウザで機能するには、ポリフィルを使用する必要があります。

バベルポリフィル

Babel-cliには、コマンドラインでコードを簡単にコンパイルできる一連のコマンドが付属しています。 また、コマンドとともに使用するプラグインやプリセットなどの機能も備えており、一度にコードを簡単に変換できます。

BabelJSを使用する利点

このセクションでは、BabelJSの使用に関連するさまざまな利点について学習します-

• BabelJSは、JavaScriptに新しく追加されたすべての機能との下位互換性を提供し、任意のブラウザーで使用できます。
• BabelJSには、ES6、ES7、ESNextなど、JavaScriptの次のバージョンを取り込むためにトランスパイルする機能があります。
• BabelJSは、gulp、webpack、flow、react、typescriptなどとともに使用できます。 それを非常に強力にし、開発者の生活を楽にする大きなプロジェクトで使用することができます。
• BabelJSは、react JSX構文と連携して動作し、JSX形式でコンパイルできます。
• BabelJSはプラグイン、ポリフィル、babel-cliをサポートしており、大きなプロジェクトでの作業が簡単になります。

BabelJSを使用することの欠点

このセクションでは、BabelJSを使用することのさまざまな欠点について学習します-

• BabelJSコードはトランスパイリング中に構文を変更するため、本番環境でリリースされるとコードが理解しにくくなります。
• 変換されたコードは、元のコードと比較するとサイズが大きくなります。
• すべてのES6/7/8または今後の新機能をトランスコンパイルできるわけではなく、古いブラウザーで動作するようにポリフィルを使用する必要があります。

以下は、babeljs [[1]]

コンパイラ