BabelJS - ES6 代码执行

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>

index.js

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

console.log(_foo());

一旦运行起来,我们再chrome,firfox等现代浏览器上都能运行,但是一旦运行在一些老旧的浏览器就不能运行啦,因此我需要转化代码,将代码转化成支持es5的规范。

我们使用了 ES6 箭头函数;如上所示,这不适用于所有浏览器。为了让它工作,我们让 BabelJS 将代码编译为 ES5 并在所有浏览器中使用它。

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

执行一下代码:

npx babel ./example1/index.js --out-file ./example1/index_new.js

可以看到在我的example1目录下生成了一个新的文件,这个文件是转化后的ES5的代码

代码如下所示:

"use strict";

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

console.log(_foo());

运行一下浏览器,可以知道代码在任何浏览器都能正常执行。

版权声明:著作权归作者所有。

thumb_up 0 | star_outline 0 | textsms 0