What is Babel?
2019/5/24に更新

Babel は JavaScript コンパラーです

Babelはブラウザや開発環境が新しくても古くても同じコードが書けるように、ECMAScript 2015+ コードを後方互換性のあるバージョンの JavaScript に変換するために使用されるツールチェーンです。
以下がBabelにできることです。

  • 変換構文
  • ターゲット環境に欠けているpolyfill機能(@babel/polyfillを通じて)
  • ソースコード変換(codemods)
  • もっと! (インスピレーションのためにこれらのvideosをチェックしてください)
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

コンパイラに関するすばらしいチュートリアルについては、the-super-tiny-compilerをチェックしてください。これはBabel自体がどのように高レベルで動作するかを説明しています。

ES2015 以降

Babelはシンタックストランスフォーマを通じて最新バージョンのJavaScriptをサポートしています。

これらのpluginsを使えばブラウザのサポートを待たずに今すぐ新しい構文を使用できます。 はじめにusage guideを調べてください。

JSX and React

BabelはJSX構文を変換することができます! 始めるために私たちのReact presetをチェックしてください。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についてさらに詳しく学ぶ

型注釈(Flow と TypeScript)

Babelは型注釈を取り除くことができます!Flow プリセットまたはTypeScript プリセットをチェックしてください。Babelは型チェックをしないことに注意してください。型を確認するには、FlowまたはTypeScriptをインストールして使用する必要があります。

あなたは以下のFlow プリセットをインストールすることができます。

npm install --save-dev @babel/preset-flow
// @flow
function square(n: number): number {
  return n * n;
}

またはtypescriptプリセット

npm install --save-dev @babel/preset-typescript
function Greeter(greeting: string) {
    this.greeting = greeting;
}

FlowTypeScriptの詳細について学ぶ

拡張可能

Babelはプラグインから作られています。既存のプラグインを使用して独自の変換パイプラインを作成するか独自のものを作成します。プリセットを使用または作成することでプラグインを簡単に使用できます。Learn more →

astexplorer.netでその場でプラグインを作成するか、またはastexplorer.netを使用してプラグインテンプレートを生成します。

// A plugin is just a function
export 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

Source map support so you can debug your compiled code with ease.
ソースマップをサポートしているので、コンパイル済みコードを簡単にデバッグできます。

ECMAScript準拠

Babelは、できる限り合理的にECMAScript標準に忠実であり続けるよう努めます。パフォーマンスとのトレードオフとして、よりECMAScriptの仕様に準拠するための特別なオプションもあります。

コンパクト

Babelは可能な限り最小限のコードを使用しようとします。

場合によってはこれを行うのは難しいかもしれませんし、読みやすさ、ファイルサイズ、速度の面で仕様準拠性を犠牲にするかもしれない特定の変換のための「ゆるい」オプションがあります。

このページの内容は https://babeljs.io/docs/en/guides (MIT) から引用しています