バベルについて、あなたは物事のいくつかを知っている必要があります

概要

バベル自体は、JSXが反応するように変換することができるように、もっと重要なのは、内部の近代的なブラウザでバベル拡張メカニズムを実行するためのコードにES6 / ES7 ES5コードを変換するための責任を負うツールです、フローの静的構文解析を行います。

コードにより、プラグインのプリセット番号に変換し、様々なモジュールを備えるバベルは、我々はについて話しようとしています。

注：ローカル・ノードとNPMをインストールすると仮定し、pajkage.jsonが含まれているプロジェクトファイルを確保しながら、コマンドラインツールの使用を排除するものではありません。

バベル-CLI

変換コードを達成するためにバベルのCLIコマンドラインは、あなたはもちろん、バベル-CLI -gグローバルNPMをインストールしてインストールすることができ、また、ローカルプロジェクトディレクトリ内のローカルインストール用バベル-CLI -save-devのをNPMインストールし実行することが

ここやり方は主に次の二つの利点には、ローカルにインストールされたアイテムをお勧めします：

1.さまざまなプロジェクト自体のバージョン違いのバベル強い依存を防ぐに依存することになります。
2.プロジェクト自体に依存バベルのバージョンが任意の自由で柔軟な管理および制御することができます。

バベル-cliの依存をインストールするには、プロジェクトの完了後は、コンソールで次のコマンドを入力することができます。

1	バベルexample.js --out-ファイルcompiled.js

各命令の部分の意味：

バベルコールバベルのCLI;
example.jsはES6 / ES7ファイルを変換する必要性を指定しました。
-out-ファイルバベルのコンパイラオプション、コンパイル済みのファイル出力に代わって、カタログファイルをコンパイルする必要がある場合、-output-DIRとの出力は、-dと略記することがある、-oと略記することができます。
compiled.js - 出力ファイル名を指定します。

すべての変更命令の完全なコードは、我々は、以下の工程を自動化するために、スクリプトのpackage.jsonを設定するための指示を与えることによって、タスクを構築することができ、明らかにそれは厳しいタスクがあり、再びノック：

{ 
    ... "スクリプト"：{ "ビルド"："バベル./src -d ./lib -w"     }     ... }

命令上記-Wは、実行されるとlibディレクトリに入力されたコードを再コンパイルする変更としてバベルモニターファイルsrcディレクトリの変化を表します。

バベルレジスタ

フックラインのトランスコーディング機能により実現したノードの必要機能を、結合することにより、バベルは、登録し、より良い方法がにあるので、このように、起因するパフォーマンスを持参し、貧しい人々の経験につながるリアルタイムトランスコーダの損失に、本番環境での使用は推奨されていません変換コードを完了するためにコードを展開する前に、

しかし、開発環境はどのように使用し、それをバベル登録、まだ非常に使いやすいです直接コードをコンパイルして実行を実現することができますか？
でバベル・レジスタ命令をインストールしておく必要があります

1	NPMバベル登録--save-devのインストール

シンプルES6 / ES7ファイルindex.jsを作成します。

1 2	CONSTのsayHello =（）=> {にconsole.log（'こんにちは'）}。こんにちはと言う（）;

index.jsファイルregister.jsを必要とする新しいファイルを作成します。

1 2	（必要「バベル登録」）; （必要'index.js'）;

我々はノードregister.jsを実行すると、コンソールが出力さこんにちは。

バベルノード

あなたがファイルを変換し、最良の方法は、バベル-nodeコマンドを使用することです迅速必要性のバベルを実行したい場合は、同じ方法では、本番環境での使用は推奨されていない、同じ理由から、自然CLIバベルのインストールはバベルノードを運ぶために、どのように使用する方法それは？

まず、簡単なES6 / ES7ファイルindex.jsを作成します。

1 2	CONSTのsayHello =（）=> {にconsole.log（'こんにちは'）}。こんにちはと言う（）;

次の直接バベルノードindex.js、あなたはコンソールでハロー出力を見ることができます。

バベルの設定

私が前に言ったようにあなたはバベルを知らせなければ、バベル能力は何もしません、ファイルを除き、ある場所から別の場所に移動するので、私たちはバベルの仕事にどのようにバベルに通知するように設定プリセットやプラグインを提供する必要があります。

.babelrc

.babelrcファイルには、次のように、おそらく構造ファイル、設定ファイルバベルです

{ "プリセット"：[]、"プラグイン"：[] }

今、私たちは、標準ベースのES6はバベルの構成ファイルによってES5にトランスコードに反応だろうバベルを通知する必要があるとし、どのようにしますか？

まず、プリセットプリセットをインストールする必要があるとのes2015のリアクト。

1 2	NPMバベル・プリセット・es2015 DEV --saveインストール NPMバベルプリセット反応し--save-DEVをインストールします

.babelrcを更新し、プリセットの設定を追加することができます。

{ "プリセット"：[ "es2015" 、"反応する" ]、"プラグイン"：[] }

その草案ES6段階（案）の構文、バベルの多くを使用し、当社のコードファイルは、うまく標準JSの規範は5つの段階（Strawman、提案、ドラフト、候補者、完成を通過する必要があることが知られているプリセットの追加とするものを追加する必要がある場合）、最終的な標準に含まれる、最終ドラフト段階は、主に次の4つの中で、適切な変換作業の完了の様々な段階を予め設定することにより予め設定可能性包含基準、バベルです。

バベル・プリセット・ステージ0
バベル・プリセット・ステージ1
バベル・プリセット・ステージ2
バベル・プリセット・ステージ3

なぜないバベル・プリセット・ステージ5理由、それはバベル・プリセット・es2015であるため

上記段階の各々が予め設定された後に予め設定されたことに依存して、例えばバベル・プリセット・ステージ1は、バベル・プリセット・ステージ2、及びバベルプリセット段-3に依存します

だから、限り、あなたは、対応するプリセットをインストールすると、ドラフト段階の構文をサポートするため、

1	NPMインストールバベル・プリセット・ステージ2

バベルは、設定ファイルを変更することができます。

{ "プリセット"：[ "es2015" 、"反応する"、"ステージ2" ]、"プラグイン"：[] }

バベル、ポリフィル

バベル-ポリフィルのES6は不在ポリフィルの場合、次のコードで、例えば、全体の環境をシミュレートします。

1 
2 
3

関数 （）{ 戻り Array.from（引数）.MAP（（A）=> A + 2）。}

に変換

関数 （）{ 戻り（Array.from（引数）.MAP 機能を（A）{ 戻り、+ 2     }）。}

このコードは、実際にArray.from APIをサポートしていないため、そのJSカーネルの、（QQのブラウザ、Baiduのブラウザなどの低いバージョン）多くのブラウザでは動作しません。

1	キャッチされない例外TypeError：Array.fromはない機能

この問題を解決するために、我々はポリフィルを追加する必要があり、ポリフィル自体は未実現のローカルAPI JS現在の動作環境を実装するコードの断片である、バベル使用corejs使用して、そのポリフィルなどを再生器サポート発電機と非同期機能を、

バベルのポリフィル機能をサポートするには、まずそれをインストールする必要があります。

1	NPMバベル-ポリフィル--save-devのインストール

そして、ポリフィルを使用する必要のいずれかの文書の先頭にファイルを参照します。

1	インポート「バベル-ポリフィル」 ;

バベル詳細設定

多くの人々は、単にいくつかの作業を完了するために、いくつかのプリセットを内蔵しバベルを使用しますが、能力が実際にはるかバベルそれだけです。

手動でプラグインを設定

プリセットのバベル自身があなたには、いくつかの特別なサポートを追加したい場合は、手動で、追加のプラグインを追加することができます例えば、あなたのコードはデコレータをサポートしたいES7、あなただけの対応するプラグインのデコレータをインストールし、設定プラグインのシリーズです。

1	NPM --save-devのバベル・プラグイン・変換・デコレーターをインストール

.Babelrcはその後することができ、ファイルにコメントを追加しました：

{
  "presets": ["es2015"],
  "plugins": ["transform-decorators"]
}

你可以在babel官网查看babel 官方插件列表，你也可以在npm仓库查看开源社区贡献的babel插件列表

有些插件还可以额外添加一些配置项，例如很多插件会包含一个 “loose” 配置项用来指定丢弃一些标准规范的行为，以便生成更简单，更健壮的代码；

{
   ...
   plugins:  ["transform-es2015-classes", { "loose": true }]
   ...
}

分环境配置babel

babel有很多插件提供了对开发过程中的支持，同时也有很多插件提供了对生产环境的代码优化，你可以通过指定不同环境动态加载不同的babel插件：

{
    "presets": ["es2015"],
    "env": {
        "development": {
            "plugins": [...]
        },
        "production": {
            "plugins": [...]
        }
    }
}

当前的上下文环境是根据 process.env.BABEL_ENV 获取的，若没有，则尝试从 process.env.NODE_ENV 获取，若NODE_ENV也没有，则默认是 development 环境；

以下是分别在Unix和Windows系统上设置环境变量的方式：

Unix:

1 2	$ BABEL_ENV=development $ NODE_ENV=development

Windows:

1 2	$ SET BABEL_ENV=development $ SET NODE_ENV=development

当然更好的方式是使用类似cross-env的npm 包，它可以让你通过脚本参数指定环境变量。

构建自己的babel配置

每次写相同的babel配置文件其实很浪费时间，所以我们需要构建自己的presets模块

假设有如下的 .babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-decorators"]
}

接下来你要做的就是命名该项目 babel-preset-* ，然后创建两个文件：
一个 package.json 文件：

{
  "name": "babel-preset-awesome",
  "version": "1.0.0",
  "author": "Kliment Petrov <[email protected]> (http://kleopetrov.me)",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-plugin-transform-decorators": "^6.6.5",
  }
}

然后，创建一个 index.js 文件并导出 .babelrc 的上下文，将文件中的preset和插件改为用require的方式调用：

module.exports {
    {
        presets: [
            require("es2015"),
            require("react")
        ],
        plugins: [
            require("transform-decorators")
        ]
    }
}

最后将它发布到npm仓库即可；

其它工具

babel也可以和其它工具例如 linting，代码风格配合一起使用

Linting

最有名的Linting工具非eslint莫属，babel将其整合到官方支持，首先，我们需要安装对应的包:

1	npm install eslint babel-eslint --save-dev

接下来，在你的项目下创建 .eslintrc 文件，并做配置：

{ "パーサ"："バベル-eslint" 、"ルール"：{     ...     } }

最後の設定スクリプトあなたのpackage.jsonで糸くず、その後、NPMの実行糸くずを実行することができます。

{ 
    ... "スクリプト"：{ "糸くず"："eslint ./src/*.js*"     }     ... }

エディタプラグイン

より多くのユーザーのバベルとして、主要なIDEは、対応するプラグインのサポートを提供しバベル

概要

バベルとその周辺の生態系のWeb開発は、この記事の導入により、今日ではますます重要な役割を果たして、あなたはその後、楽しむ（JSX、フローなど）を設定することで、最新の技術とjsの周囲の仕様を使用することができます言っても過言ではない、それを起動するために急いで！

オリジナル：大列バベルに、あなたは、物事のいくつかを知っている必要があります