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 提供的转码器,支持在线转码、命令行转码等