Babelの初心者ガイド

Posted on by admin

この記事では、開発者が次世代のJavaScriptを今日使用できるJavaScriptコンパイラであるBabelを紹介します。

webアプリケーションを構築するときにJavaScriptを書くのはイライラすることがあります。 ターゲットとしているブラウザで利用可能な機能と、機能が実装されていないときに何が起こるかを考える必要があります。 一部の人々は単にそれを使用しないことをお勧めしますが、これは複雑なものを構築している場合、ほとんどの場合痛みを伴う経験です。

ありがたいことに、いくつかのツールは、サポートされているものを心配するのをやめ、できる限り最高のコードを書くことができます。 彼らはトランスパイラーと呼ばれています。 Transpilerは、ソースコードを入力として受け取り、新しいソースコードを出力として生成するツールで、構文は異なりますが、意味的にはできるだけオリジナルに近い、ま

Babelは、現代のJavaScript（ES2015+）を古いブラウザで実行される互換性のある実装に変換するための標準的なトランスパイラです。 JavaScriptを書くことに集中したいだけなら、これは完璧な解決策です。

そして、Babelの主な目標は、古い、または時には現在のブラウザのためのECMAScript（ES）の最新の標準を翻訳することですが、それはより多くを行うことができます。 同様に非標準機能の追加を可能にするプリセットやプラグインのエコシステムがあります。 各プラグインは、あなたのコードのために利用可能な新しい機能/変換を行い、プリセットは、プラグインの単なるコレクションです。

はじめに

プロジェクトと使用するツールによって、Babelを設定する方法は異なります。 この記事では、CLIを使用してBabelを設定する方法を説明しますが、ビルドシステムやフレームワークを使用している場合は、公式サイトで具体的な手順を ほとんどの場合、CLIは最も速く、最も簡単な方法なので、初めてのユーザーであれば、気軽に続行してください。プロジェクトにBabelをセットアップする最初のステップは、npmを使用してパッケージをインストールし、それをdev依存関係として追加することです。 あなたが作業ノードを持っていると仮定します。js環境はすでに整っていますが、それはあなたの端末で次のことを実行するだけの問題です:

mkdir babel-testcd babel-testnpm init -ynpm install --save-dev babel-cli

これにより、ディレクトリ（babel-test）の変更がディレクトリに作成され、npmプロジェクトを初期化し（したがってpackage.jsonファイルを作成）、dev依存関係としてbabel-cliをイ

上記のヘルプが必要な場合は、Nodeのインストールとnpmの操作に関するチュートリアルを参照してください。

次に、package.jsonを開き、npmスクリプトにbuildコマンドを追加できます:

"scripts": { "build": "babel src -d dist"}

これにより、srcディレクトリからソースファイルが取得され、結果がdistディレクトリに出力されます。 次に、次のように実行できます:

npm run build

しかし、待って！ Babelを実行する前に、コードを変換するプラグインをインストールして設定する必要があります。 これを行う最も簡単かつ迅速な方法は、指定したターゲットブラウザに応じて適切なプラグインを選択するEnvプリセットを追加することです。 それは使用して取付けることができます:

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

次に、プロジェクトのルートに.babelrcファイルを作成し、プリセットを追加します:

{ "presets": }

.babelrcファイルは、Babelのすべての設定を配置する場所です。 あなたは、プリセットやプラグインを設定するために、主にこれを使用することがありますが、より多くのオプションが用意されています。 完全なリストはBabel APIページで確認できます。

お使いのオペレーティングシステムによっては、ドットで始まるファイルはデフォルトで非表示になりますのでご注意ください。 これが問題になる場合（またはファイルを少なくしたい場合）、Babel設定をpackage.jsonファイルのbabelキーの下に置くことができます:

{ "name": "babel-test", "version": "1.0.0", "babel": { // config }}

最後に、Babelが見つけることを期待しているディレクトリとファイルを作成しましょう:

mkdir src dist

そして、それを変換するために何かを与える:

let a = 1;let b = 2; = ;console.log(a);console.log(b);

この例では、分割代入を使用して2つの変数の値を交換します。

Babelの実行

すぐに使用できるBabelインストールができたので、buildコマンドを実行してコンパイルプロセスを実行できます:

npm run build

これにより、src/main.jsからコードが取得され、ES5コードに変換され、変換されたコードがdist/main.jsに出力されます。

:

"use strict";var a = 1;var b = 2;var _ref = ;a = _ref;b = _ref;console.log(a);console.log(b);

ご覧のとおり、letはvarに置き換えられ、Babelはスワップを容易にするために一時変数（アンダースコアで示される）を導入しました。

そしてそれはそれです。 srcディレクトリに記述したコードは、以前のバージョンの言語に翻訳されます。 デフォルトでは、プリセットにオプションを追加しないと、すべての変換がロードされます。 また、対象のブラウザを次のように指定することもできます:

{ "presets": } }] ]}

これにより、各ブラウザの最新の2つのバージョンとバージョン7以上のSafariをサポートするために必要な変換がロードされます。 ターゲットブラウザで使用可能なオプションは、Browserlistリポジトリにあります。

: 簡単な概要

前のセクションで気づいたように、Babelはインストール時に単独では何もしません。 私たちは、所望の動作を得るためにプラグインのセットをインストールする必要があり、または我々はプラグインの事前定義されたセットであるプ

通常、含める各機能はプラグインの形式になります。 ES2015の例には、次のものがあります:

  • 定数
  • 矢印関数
  • ブロックスコープ関数
  • クラス
  • for-of
  • スプレッド
  • テンプレートリテラル

プラグインを参照してください完全なリストのためのbabel docsのページ。

しかし、時には、すべてのプラグインを一つずつ含めたくない場合があります。 そのため、各プラグインをインストールするプロセスを容易にする事前に構築されたプリセットがあります。

現在利用可能な三つの公式プリセットは次のとおりです:

  • Env
  • React
  • Flow

Envが最も頻繁に使用され、ここで使用したものです。 対象となるブラウザに応じて、コードに互換性を持たせるために必要なすべての変換が自動的にロードされます。

React presetは、Reactプロジェクトで一般的に見られるコードを変換し、主にFlow annotationsやJSXとの互換性を追加します。

最後に、フロープリセットを使用して、フロータイプの注釈からコードをクリーンアップします（ただし、タイプが有効かどうかはチェックしません）。)

Babel Polyfill

通常、同等の機能が実装されていないため、構文的に変換できないJavaScript機能があります—例えば、Promiseとgenerator関数。

これらの種類の機能は、コードで使用するライブラリによってブラウザに実装する必要があり、それはポリフィルの作業です。

Babel polyfillはcore-jsとRegeneratorランタイムによって構成されます。 一緒に、彼らはES2015+のすべての機能をカバーしています。

高度な使用

前述のように、Babelはまだ言語で実装されていない機能を変換するために使用することもできます。 これの良い例は、クラスフィールドの提案です（現在TC39stage3：candidateにあります）。 これは、メソッドを特定のコンポーネントに明示的にバインドする必要性を排除し、コンポーネントのstateをクラスフィールドとして宣言できることを意味

今日クラスフィールドを使用したい人のために、dev依存関係としてbabel-plugin-transform-class-propertiesを追加する必要があります:

npm install --save-dev babel-plugin-transform-class-properties

また、次のように.babelrcファイルを更新します:

{ "presets": , "plugins": }

今、あなたは書くことができます:

class App extends Component { state = { count: 0 }; incCount = () => { this.setState(ps => ({ count: ps.count + 1 })); }; render() { return ( <div> <p>{ this.state.count }</p> <button onClick={this.incCount}>add one</button> </div> ); }}

そして、それはそこに停止しません。 また、独自のBabelプラグインを構築してAstを理解するチュートリアルが示すように、Babelを使用して独自の新機能を言語に追加することもできます。

Alternatives

現代のwebアプリケーションを書くには、JavaScriptで利用可能な機能以上のものが必要になることがあります。 他の言語も互換性のあるJavaScriptに翻訳することができますが、他の便利な機能も実装しています。最も人気のあるオプションはTypeScriptで、これは最新のES機能を実装する通常のJavaScriptですが、特に型の安全性に関しては他のものも追加します。

他の極端には、PureScriptのような関数型のものからDartのようなオブジェクト指向のものまで、さまざまなカテゴリに渡って全く異なる言語があります。

代替言語のより深い概要については、JavaScriptにコンパイルされる10の言語を見てみましょう。

結論

Babelは、すべての開発者とコードを実行する必要がある幅広いブラウザが理解できるJavaScriptを提供しながら、最新のアプリケーションを書くための素晴ら

Babelは、ES2015+を以前のバージョンの言語に変換するのに役立つだけでなく、ブラウザとNodeなどのプラットフォームの両方で役立ちます。js—しかし、標準の一部ではない新機能を追加するためのものでもあります。 私が何を意味するのかを見るには、npmディレクトリを見て、利用可能なすべてのBabelプラグインまたはプリセットを見つけてください。

JavaScriptはこのような急速なペースで進化しているので、ブラウザメーカーは最新の機能を実装するためにしばらくの時間が必要になることは明らかです。 ツールキットにBabelを配置することは、ユーザーを放棄していないという知識の中で、最先端のJavaScriptを今日安全に書くことができることを意味します。 愛してはいけないことは何ですか？

コメントを残す

メールアドレスが公開されることはありません。