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

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

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

相关推荐

撤回Angular CLI执行的ng eject

使用angular cli执行ng eject后,就不允许执行ng server或ng build。执行ng server 或ng build会报一下错误:An ejected project cannot use the build command 

MyBatis执行MySql批量插入数据

MySQL批量插入数据语法为:insert into my_table(field1, field2, field3) values ("f1_vaule1","f2_vaule1","f3_vaule1"), ("f1_vaule2","f2_vaule2","f3_vaule2"), ("f1_vaule3","f2_vaule3","f3_vaule3

JVM 类执行机制:解释执行(interpreter)和编译执行(JIT)

JVM执行字节码有两种方式:解释模式(interpreter)和编译模式(jit)。整个java程序执行过程如下:使用javac把.java源文件编译为字节码,文件一般以.class作为后缀字节码经过JIT环境变量进行判断,是否属于热点代码(多次调用的方法,或循环等)热点代码使用JIT编译为可执行的机器码非热点代码使用解释器解释执行所有字节码解释器将每个Java指令都转译成对等的微处理器指令,并根

在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。案例假设有一个表格组件,和一个行组件<ObjectRow />,现在需要在表格组件里循环生成行组件<ObjectRow />。是不能直接在jsx里使用for循环,这里介绍两种方法:map函数和立即执行函数。方法一:使用map函数render: function ()&nb

JavaScript停止setInterval的执行

setInterval()是会返回一个interval id,可以调用clearInterval()来停止setInterval()的执行:var refreshIntervalId = setInterval(fname, 10000); /* 在不需要执行Interval */ clearInterval(refreshI

git使用ls-files统计代码行数的命令

需要注意,这里统计的是git仓库中所有被跟踪文件的代码行数。1、简单命令如下:$ git ls-files | xargs wc -l2、统计指定目录:git ls-files src test | wc -l3、排除某些文件或文件夹git ls-files | grep -Ev 'assets|.jpg|.png' | wc -l

Ubuntu执行sudo命令时免输密码

执行visudo编辑sudo的配置$ sudo visudo配置文件显示如下:# # This file MUST be edited with the 'visudo' command as root. # # Please consider adding local content in /etc/sudoers.d/ instead of # directly modifying this

Python使用一行代码合并字典(Python2,3.5,3.9)

Python字典合并功能说明:对于字典x和y,z,合并后的字典,如果词典中出现重复的key,就会会出现y中的值替换x中的值。Python 3.9+合并词典Python 3.9开始,可以直接使用“|”实现字典的合并。z = x | y   Python 3.5+合并词典从Python 3.5开始,可以使用**扩展符,来进行合并。z = {**x, **y}Python 2 - P