ECMAScript6基础学习教程(一)运行ES6代码

目前,浏览器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,该文件用于设置转码规则和插件,内容如下:
{
  "presets": ['es2015']
}
  1. 新建一个test.js,用babel-node命令运行JS文件:
babel-node test.js
  1. 控制台输出运行结果。

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

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

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

<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基础学习教程(二)块级作用域

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、为什么要编译 ES6 是下一代的 JavaScript 标准,虽然目前大部分浏览器都兼容 ES6 的语法。 ...
    运维开发_西瓜甜阅读 502评论 0 0
  • 随着es6,es7,es8等新标准的出现,我们在项目中为了更好的体验和使用这些新特性,但是在浏览器中又不能直接运行...
    梦想成真213阅读 2,972评论 0 2
  • 这几个概念如果没有仔细读相应的教程或者文档,很容易混淆。下面是根据我的浅表理解和网络参考整理的文档,不一定准确,有...
    V_Jan阅读 2,115评论 0 1
  • 1. Babel 转码器 Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从...
    Metallica_d8b1阅读 248评论 0 0
  • ECMAScript6.0(以下简称ES6)是Javascript 语言的下一代标准,已经在2015年6月正式发布...
    喵喵_6744阅读 432评论 0 0