美文网首页Web前端之路让前端飞技术干货
ECMAScript6基础学习教程(一)运行ES6代码

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

作者: 娜姐聊前端 | 来源:发表于2017-04-13 20:55 被阅读314次

    目前,浏览器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基础学习教程(二)块级作用域

    微信公众号:

    相关文章

      网友评论

        本文标题:ECMAScript6基础学习教程(一)运行ES6代码

        本文链接:https://www.haomeiwen.com/subject/uyvbattx.html