BabelJS - ES6 程式碼執行

BabelJS 是一個 JavaScript 轉譯器，它可以將新增到 JavaScript 的新特性轉換為 ES5 或基於給定的預設或外掛轉換為 React。ES5 是 JavaScript 最古老的形式之一，並且可以無問題地執行在新舊瀏覽器上。在本教程的大多數示例中，我們將程式碼轉譯為 ES5。

我們已經看到了許多特性，例如箭頭函式、類、Promise、生成器、非同步函式等，這些特性被新增到 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());

輸出

當我們在 Chrome 瀏覽器中執行上述 html 時，我們得到以下輸出：

當 HTML 在 Firefox 中執行時，它會生成以下輸出：

當相同的 HTML 在 Internet Explorer 中執行時，它會生成以下語法錯誤：

我們使用了 ES6 箭頭函式；正如上面看到的，它不適用於所有瀏覽器。為了使其正常工作，我們使用 BabelJS 將程式碼編譯為 ES5，並在所有瀏覽器中使用它。

將使用 babeljs 將 js 檔案編譯為 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 瀏覽器輸出

列印頁面