サーチ…
前書き
トランスペアリングは、特定のプログラミング言語を解釈し、それを特定のターゲット言語に翻訳するプロセスです。この文脈では、transpilingはJS言語をコンパイルして、それらをJavascriptのターゲット言語に翻訳します。
備考
Transpilingは、ソースコードをソースコードに変換するプロセスです。これは、JavaScript開発の一般的なアクティビティです。
一般的なJavaScriptアプリケーション（Chrome、Firefox、NodeJSなど）で利用できる機能は、最新のECMAScript仕様（ES6 / ES2015、ES7 / ES2016など）より遅れていることがよくあります。仕様が承認されると、JavaScriptアプリケーションの将来のバージョンでネイティブに使用できるようになります。
エンジニアは、新しいJavaScriptリリースを待つのではなく、コンパイラを使用して新しい仕様のコードを既存のアプリケーションと互換性のあるコードに変換することで、将来的にネイティブに実行するコードを作成することができます。一般的な蒸散器には、 BabelとGoogle Traceurがあります。
Transpilersを使って、TypeScriptやCoffeeScriptのような別の言語から、通常の「バニラ」JavaScriptに変換することもできます。この場合、翻訳はある言語から別の言語に変換されます。
トランスポートの概要
例
ES6 / ES2015〜ES5（ バベル経由） ：
このES2015の構文
// ES2015 arrow function syntax
[1,2,3].map(n => n + 1);
解釈され、このES5構文に変換されます。
// Conventional ES5 anonymous function syntax
[1,2,3].map(function(n) {
return n + 1;
});
CoffeeScript to Javascript（ビルトインCoffeeScriptコンパイラ経由） ：
このCoffeeScript
# Existence:
alert "I knew it!" if elvis?
解釈され、Javascriptに翻訳されます：
if (typeof elvis !== "undefined" && elvis !== null) {
alert("I knew it!");
}
どのように私は蒸散するのですか？
ほとんどのコンパイルからJavascript言語には、（CoffeeScriptまたはTypeScriptのような） 内蔵されたトランスバータがあります。この場合、設定の設定やチェックボックスを使用して、言語のトランスバータを有効にするだけでよいでしょう。高度な設定は、トランスバイヤーに関連して設定することもできます。
ES6 / ES2016-to-ES5蒸解の場合、使用される最も顕著な蒸留器はBabelです。
どうして私は蒸散するべきですか？
最も引用されている利点は次のとおりです。
- 新しい構文を確実に使用する能力
- すべてのブラウザではないにしてもほとんどのブラウザ間の互換性
- CoffeeScriptやTypeScriptのような言語によるJavascriptへの欠落/未処理の機能の使用
BabelでES6 / 7を使い始める
ES6のブラウザサポートは拡大していますが、コードが完全にサポートされていない環境でも動作することを確認するには、ES6 / 7からES5へのBabelを使用してください。
互換性について心配することなくプロジェクトでES6 / 7を使用したい場合は、 NodeおよびBabel CLIを使用できます
Babel for ES6 / 7サポートのプロジェクトのクイックセットアップ
- ノードのダウンロードとインストール
- お気に入りのコマンドラインツールを使用してフォルダに移動してプロジェクトを作成する
~ npm init
- Babel CLIのインストール
~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015
-
.jsファイルを保存するためのscriptsフォルダを作成し、次に蒸散された完全に互換性のあるファイルが保存されるdist/scriptsフォルダをdist/scriptsます。 - プロジェクトのルートフォルダに
.babelrcファイルを作成し、これに書き込みます
{
"presets": ["es2015"]
}
-
package.jsonファイル（npm initを実行したときに作成された）を編集し、buildスクリプトをscriptsプロパティに追加します。
{
...
"scripts": {
... ,
"build": "babel scripts --out-dir dist/scripts"
},
...
}
- ES6 / 7でプログラミングを楽しむ
- すべてのファイルをES5に転送するには、次のコマンドを実行します
~ npm run build
より複雑なプロジェクトのために、あなたは見撮りたいかもしれませんがぶ飲みまたはWebPACKのを