Babeljs-transpile-es7-features-to-es5
BabelJS-ES7へのTranspile ES7機能
この章では、ES7の機能をES5に変換する方法を学びます。
ECMA Script 7には、次の新機能が追加されています-
- 非同期待ち
- べき乗演算子
- Array.prototype.includes（）
babeljsを使用してES5にコンパイルします。 プロジェクトの要件に応じて、ecmaバージョン（ES7からES6またはES7からES5）でコードをコンパイルすることもできます。 ES5バージョンは最も安定しており、すべての最新および古いブラウザーで正常に動作するため、コードをES5にコンパイルします。
非同期待ち
非同期は、暗黙のプロミスを返す非同期関数です。 約束は解決されるか拒否されます。 非同期機能は、通常の標準機能と同じです。 この関数には、promiseを返すまで実行を一時停止するawait式を含めることができ、一度取得すると、実行が続行されます。 Awaitは、関数が非同期の場合にのみ機能します。
asyncとawaitの動作例を次に示します。
例
let timer = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve("Promise resolved after 5 seconds");
}, 5000);
});
};
let out = async () => {
let msg = await timer();
console.log(msg);
console.log("hello after await");
};
out();出力
Promise resolved after 5 seconds
hello after awaitawait式は、タイマー関数が呼び出される前に追加されます。 タイマー関数は、5秒後にプロミスを返します。 awaitは、タイマー機能の約束が解決または拒否されるまで実行を停止し、後で続行します。
babelを使用して上記のコードをES5に変換します。
ES7-非同期待ち
let timer = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve("Promise resolved after 5 seconds");
}, 5000);
});
};
let out = async () => {
let msg = await timer();
console.log(msg);
console.log("hello after await");
};
out();コマンド
npx babel asyncawait.js --out-file asyncawait_es5.jsBabelJS-ES5
"use strict";
var timer = function timer() {
return new Promise(function (resolve) {
setTimeout(function () {
resolve("Promise resolved after 5 seconds");
}, 5000);
});
};
var out = async function out() {
var msg = await timer();
console.log(msg);
console.log("hello after await");
};
out();Babeljsはオブジェクトまたはメソッドをコンパイルしません。そのため、ここで使用されるプロミスは変換されず、そのまま表示されます。 古いブラウザでpromiseをサポートするには、promiseをサポートするコードを追加する必要があります。 今のところ、次のようにbabel-polyfillをインストールしましょう-
npm install --save babel-polyfilldev-dependencyではなく、依存関係として保存する必要があります。
ブラウザでコードを実行するには、node_modules \ babel-polyfill \ dist \ polyfill.min.jsのポリフィルファイルを使用し、以下に示すようにスクリプトタグを使用して呼び出します-
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
<script type="text/javascript" src="aynscawait_es5.js"></script>
</body>
</html>上記のテストページを実行すると、コンソールに次のような出力が表示されます。
べき乗演算子
*ES7でべき乗に使用される演算子です。 次の例は、ES7での同じ動作を示しており、コードはbabeljsを使用してトランスコンパイルされます。例
let sqr = 9* *2;
console.log(sqr);出力
81ES6-べき乗
let sqr = 9* * 2;
console.log(sqr);べき乗演算子を変換するには、次のようにインストールするプラグインをインストールする必要があります-
コマンド
npm install --save-dev babel-plugin-transform-exponentiation-operator次のようにプラグインの詳細を .babelrc ファイルに追加します-
{
"presets":[
"es2015"
],
"plugins": ["transform-exponentiation-operator"]
}コマンド
npx babel exponeniation.js --out-file exponeniation_es5.jsBabelJS-ES5
"use strict";
var sqr = Math.pow(9, 2);
console.log(sqr);Array.prototype.includes（）
この機能は、渡された要素が配列に存在する場合はtrueを、存在しない場合はfalseを返します。
例
let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));出力
true
true
false*includes* は配列のメソッドであり、トランスパイルされないため、ここで再びbabel-polyfillを使用する必要があります。 古いブラウザで機能させるために、ポリフィルを含める追加の手順が必要です。ES6-array.includes
let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));コマンド
npx babel array_include.js --out-file array_include_es5.jsバベル-ES5
'use strict';
var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));古いブラウザでテストするには、以下に示すようにポリフィルを使用する必要があります-
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
<script type="text/javascript" src="array_include_es5.js"></script>
</body>
</html>
