Babeljs-transpile-es7-features-to-es5

提供：Dev Guides
2020年6月23日 (火) 03:46時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

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 await

await式は、タイマー関数が呼び出される前に追加されます。 タイマー関数は、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.js

BabelJS-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-polyfill

dev-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);

出力

81

ES6-べき乗

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.js

BabelJS-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>

出力

Babel ES5

「https://www.finddevguides.com/index.php?title=Babeljs-transpile-es7-features-to-es5&oldid=21951」から取得
Powered by MediaWiki