BabelはJavaScriptコンパイラです
Babelは、主に現在および古いブラウザや環境でECMAScript2015+コードをjavascriptの下位互換性のあるバージョンに変換するために使用さ Babelがあなたのためにできる主なことは次のとおりです。
- Transform構文
- ターゲット環境に欠けているPolyfill機能（@babel/polyfillを介して）
- ソースコード変換（codemods）
- その他！ （インスピレーションのためにこれらのビデオをチェックしてください）
// Babel Input: ES2015 arrow function.map((n) => n + 1);// Babel Output: ES5 equivalent.map(function(n) { return n + 1;});コンパイラの素晴らしいチュートリアル
ES2015以降
バベルは、構文トランスフォーマーを介してJavaScriptの最新バージョンをサポートしています。
これらのプラグインを使用すると、ブラウザのサポートを待たずに今、新しい構文を使用することができます。 始めるために私たちの使用ガイドをチェックしてくださJsxとReact
BabelはJSX構文を変換できます！ 始めるために私たちの反応プリセットをチェックしてくださ これをbabel-sublimeパッケージと一緒に使用して、構文の強調表示をまったく新しいレベルにします。このプリセットは
npm install --save-dev @babel/preset-reactでインストールし、Babel設定に@babel/preset-reactを追加できます。
export default React.createClass({ getInitialState() { return { num: this.getRandomNumber() }; }, getRandomNumber() { return Math.ceil(Math.random() * 6); }, render() { return <div> Your dice roll: {this.state.num} </div>; }});JSXの詳細
型注釈（フローとTypeScript）
Babelは型注釈を削除できます！ 開始するには、Flow presetまたはTypeScript presetのいずれかをチェックしてください。 型をチェックするには、FlowまたはTypeScriptをインストールして使用する必要があります。あなたはフロープリセットをインストールすることができます
npm install --save-dev @babel/preset-flow// @flowfunction square(n: number): number { return n * n;}またはtypescriptプリセットを
npm install --save-dev @babel/preset-typescriptfunction Greeter(greeting: string) { this.greeting = greeting;}function Greeter(greeting: string) { this.greeting = greeting;}function Greeter(greeting: string) { this.greeting = greeting;}function Greeter(greeting: string) { this.greeting = greeting;}function Greeter(greeting: string) { this.greeting = greeting;}function Greeter(greeting: string) { this.greeting = greeting;}function Greeter(greeting: string) { this.greeting = greeting;}Pluggable
babelはプラグインから構築されています。 既存のプラグインを使用して独自の変換パイプラインを作成するか、独自のものを作成します。 プリセットを使用したり作成したりすることで、プラグインのセットを簡単に使用できます。 詳細→
プラグインをその場で作成するastexplorer.net または、generator-babel-pluginを使用してプラグインテンプレートを生成します。
// A plugin is just a functionexport default function ({types: t}) { return { visitor: { Identifier(path) { let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = name.split('').reverse().join(''); } } };}Debuggable
ソースマップのサポートにより、コンパイルされたコードを簡単にデバッグできます。
仕様に準拠した
Babelは、可能な限りECMAScript標準に忠実であることを試みています。 また、パフォーマンスとのトレードオフとして、より仕様に準拠するための特定のオプションがある場合があります。
Compact
Babelは、かさばるランタイムに依存せずに、可能な限り最小限のコードを使用しようとします。
これはケースでは難しいかもしれませんし、可読性、ファイルサイズ、速度のための仕様準拠のトレードオフかもしれない特定の変換のための”緩い”オプ