BabelJS - ES6 代码执行

BabelJS是一个 JavaScript 转译器，它将 JavaScript 中添加的新功能转换为 ES5 或根据给定的预设或插件做出反应。ES5 是最古老的 JavaScript 形式之一，支持在新旧浏览器上运行，没有任何问题。在本教程的大多数示例中，我们已将代码转译为 ES5。

我们已经看到 ES6、ES7 和 ES8 中添加了许多功能，如箭头函数、类、Promise、生成器、异步函数等。当任何新添加的功能在旧浏览器中使用时，都会引发错误。BabelJS 有助于编译代码，向后兼容旧版浏览器。我们已经看到 ES5 在旧版浏览器上运行得非常好，没有任何问题。因此，考虑到项目环境细节，如果需要在旧浏览器上运行，我们可以在项目中使用任何新功能，并使用 babeljs 将代码编译为 ES5，并在任何浏览器上使用它，没有任何问题。

让我们考虑下面的例子来理解这一点。

例子

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

索引.js 文件

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

alert(_foo());

输出

当我们在 Chrome 浏览器中运行上面的 html 时，我们得到以下输出 -

Chrome浏览器

当 HTML 在 Firefox 中运行时，它会生成以下输出 -

产生

当在 Internet Explorer 中运行相同的 HTML 时，它会生成以下语法错误 -

IE浏览器

我们已经使用了ES6的Arrow函数；如上所示，这并不适用于所有浏览器。为了实现这一点，我们使用 BabelJS 将代码编译为 ES5 并在所有浏览器中使用它。

将使用 babeljs 将 js 文件编译为 es5 并在浏览器中再次检查。

编译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>

索引_new.js

"use strict";

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

alert(_foo());

镀铬输出

镀铬输出

火狐浏览器输出

火狐浏览器输出

IE浏览器输出

IE浏览器输出