BabelJS-ES6コード実行

*BabelJS* は、JavaScriptに追加された新機能をES5に変換するか、指定されたプリセットまたはプラグインに基づいて反応するJavaScriptトランスパイラーです。 ES5はJavaScriptの最も古い形式の1つであり、問題なく新しいブラウザーと古いブラウザーで実行することがサポートされています。 このチュートリアルのほとんどの例では、コードをES5にトランスコンパイルしました。

矢印関数、クラス、プロミス、ジェネレーター、非同期関数などの多くの機能を見てきました。 ES6、ES7、およびES8に追加されました。新しく追加された機能のいずれかが古いブラウザーで使用されると、エラーがスローされます。 BabelJSは、古いブラウザーとの下位互換性があるコードのコンパイルを支援します。 ES5は問題なく古いブラウザーで完全に正常に動作することがわかりました。したがって、プロジェクト環境の詳細を考慮すると、古いブラウザーで実行する必要がある場合は、プロジェクトの新しい機能を使用し、babeljsを使用してコードをES5にコンパイルし、問題なくブラウザーを使用できます。

これを理解するために、次の例を考えてみましょう。

例

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index.js"></script>
   </body>
</html>

index.jsファイル

var _foo = () => {
   return "Hello World"
};

alert(_foo());

出力

上記のHTMLをChromeブラウザで実行すると、次の出力が得られます-

Chromeブラウザ

FirefoxでHTMLを実行すると、次の出力が生成されます-

生成

そして、同じHTMLがInternet Explorerで実行されると、次の構文エラーが生成されます-

Internet Explorer

ES6 Arrow関数を使用しました。上記のように、同じことがすべてのブラウザで機能するわけではありません。これを機能させるために、コードをES5にコンパイルしてすべてのブラウザーで使用するBabelJSがあります。

babeljsを使用してjsファイルをes5にコンパイルし、ブラウザーで再度チェックします。

Compile es5

HTMLファイルでは、以下に示すようにindex_new.jsを使用します-

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index_new.js"></script>
   </body>
</html>

index_new.js

"use strict";

var _foo = function _foo() {
   return "Hello World";
};

alert(_foo());

クロム出力

Chrome出力

Firefoxブラウザー出力

IEブラウザ出力

Babeljs-es6-code-execution

目次