ECMAScript6基础学习教程（一）运行ES6代码

2022-05-13 14:30:11 浏览数 (1)

目前，浏览器JavaScript引擎还没有全盘支持ES6语法（Chrome情况会好些，但依旧没有支持所有的ES6新特性），所以，我们依旧需要使用ES6转码器，将ES6语法转为ES5语法，再在浏览器中运行。

最流行，最推荐的ES6转码器是Babel。

无论是React，亦或Vue，Angular2，无一例外的使用了Babel来支持ES6特性，通过webpack这个模块化和项目构建工具来编译ES6。

那么，如果只是学习，如何利用Babel运行ES代码呢？

1. 单独运行JS文件

单独运行某个含有ES6语法的JS文件，步骤如下：

  1. 安装Babel命令行工具和相关包 npm install --global babel-cli npm install --save babel-preset-es2015
  2. 在当前目录下新建配置文件.babelrc，该文件用于设置转码规则和插件，内容如下：
代码语言：javascript复制
{
  "presets": ['es2015']
}
  1. 新建一个test.js，用babel-node命令运行JS文件：
代码语言：javascript复制
babel-node test.js
  1. 控制台输出运行结果。

注意：Babel默认只转换新的JavaScript句法，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

2.在浏览器中运行JS代码

如果需要在浏览器中支持ES6语法，可以引入脚本转换器babel.min.js，以内联脚本或者外部文件链接方式运行：

代码语言：javascript复制
<html>
...
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="test.js"></script><!--外部文件链接-->
<script type="text/babel">//内联脚本，注意：需要定义type类型为“text/babel”
  //ES6代码
</script>
</html>

注意：从Babel 6.0开始，不再直接提供浏览器版本。

更多运行环境支持情况，可参看官网链接：https://babeljs.io/docs/setup/#installation。

下一节：ECMAScript6基础学习教程（二）块级作用域

ecmascript babel.js javascript npm

0 人点赞