美文网首页
01. ECMAScript 6简介

01. ECMAScript 6简介

作者: 吃紫薯的water | 来源:发表于2017-12-05 16:45 被阅读0次

    ECMAScript 6 简介

    原书作者:阮一峰
    原书地址:ECMAScript 6入门

    • ECMAScript 与 JavaScript关系
    • ES6 与ES2015、ES2016关系
    • 提案审批流程
    • Babel转换器(.babelrc、babel-cli、babel-node)

    1. ECMAScript 与 JavaScript 关系

    前者是后者的规范
    后者是前者的实现

    2. ES6 与 ES2015、ES2016 关系

    2011年 ECMAScript5.1发布后便开始制定ES6
    ES6 制定过程由于添加过多新功能,长时间未统一为规范
    后来改为每年发布一个版本,即ES2015、ES2016
    ES6 ==> ES2015 (可以视为)

    3. 提案的审批流程

    • Stage 0 Strawman(展示阶段)
    • Stage 1 Proposal(征求意见阶段)
    • Stage 2 Draft(草案阶段)
    • Stage 3 Candidate(候选人阶段)
    • Stage 4 Finished(定案阶段)

    4. Babel 转换器

    • .babelrc(配置文件放在项目根目录下)
      • 基本格式
      {
      "presets": [],
      "plugins": []
      }
      
    • babel-cli(命令行代码转换)
      • 安装命令
      $ npm install --global babel-cli
      
      • 基本用法
      # 转码结果写入一个文件
      $ babel example.js -o compiled.js
      # 整个目录转码
      $ babel src -d lib
      
    • babel-node(Node REPL环境,可运行ES6)
      • 示例
      $ babel-node
      > (x => x * 2)(1)
      2
      
    • babel-register(改写require命令,为它加上一个钩子)
      • 使用babel转换require加载的 .js .jsx .es .es6
      require("babel-register");
      require("./index.js");
      
      • 注:
        • 不会当前文件
        • 实时转换(仅用于开发环境)
    • babel-core(调用某些babel API进行转码)
      • 示例
      var babel = require('babel-core');
      // 字符串转码
      babel.transform('code();', options);
      
    • babel-polyfill(转换新的API、全局对象)
      • Babel默认只转换语法
      • 不转换新的API(Array.from)
      • 不转换新的全局对象(Maps、Set)
    • babel-standalone(浏览器环境直接使用ES6)
      • 实时转换,会影响性能
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
      <script type="text/babel">
      // Your ES6 code
      </script>
      
      • 实际生产,使用已经转换的代码
      $ npm install --save-dev babelify babel-preset-latest
      // 使用命令转换
      $  browserify script.js -o bundle.js \
      -t [ babelify --presets [ latest ] ]
      // 也可以将配置加入package.json
      {
        "browserify": {
          "transform": [["babelify", { "presets": ["latest"] }]]
        }
      }
      

    5. Traceur转码器

    Google 提供的转码器,支持在线转码、命令行转码等

    相关文章

      网友评论

          本文标题:01. ECMAScript 6简介

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