ECMAScript6简介

本文章主要参考阮一峰老师的ECMAScript6入门[http://es6.ruanyifeng.com/#docs/intro][6]

ECMAScript和JavaScript的关系：
- 前者是后者的规格，后者是前者的一种实现

ES6与ECMAScript2015的关系：
- 标准委员会最终决定，标准在每年的6月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，知道下一年的6月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本，只要用年份标记就可以了。
- ES6的第一个版本，在2015年6月发布，正式名称就是《ECMAScript 2015标准》（简称ES2015）。2016年6月，小幅修订的《ECMAScript2016标准》（简称ES2016）如期发布，这个版本可以看做是ES6.1版。
- 因此，ES6既是一个历史名词，也是一个泛指，含义是5.1版以后的JavaScript的下一代标准，涵盖了ES2015、ES2016、ES2017等等，而ES2015则是正式名称，特指该年发布的正式版本的语言标准。

Babel转码器
[Babel][6]是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以用ES6的方式编写程序，由不用担心现有环境是否支持。
配置文件.babelrc
Babel的配置文件是[.babelrc][6]，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。该文件用来设置转码规则和插件，基本格式如下。

{
  "presets": [],
  "plugins": []
}

ps：可以参考vue.js的目录结构里就有.babelrc，[rc][6]结尾的文件通常代表运行时自动加载的文件，配置等等。
既然这里提到了，就对vuejs里的.babelrc文件进行解析：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  //下面这段是在特定的环境中所执行的转码规则，但环境变量是下面的test就会覆盖上面的设置
  "env": {
  //test是提前设置的环境变量，如果没有设置BABEL_ENV则使用NODE_ENV，如果没有设置默认就是development
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

上面就是我创建的一个简单工程的.babelrc。下面来一一解释：
（参考叶家伟的微博）
- presets字段设定转码规则，使用的时候需要安装对应的插件，对应babel-preset-×××
- env是借助插件babel-preset-env，本依赖插件是设置编译环境的插件，如果直接引入不设置规则那实际和引入babel-preset-latest一样，会囊括es2015、es2016、es2017
- 'modules':false：设置模块引用规则，可以设置成[“amd”|”umd”|”systemjs”|”commonjs”| false,defaults to “commonjs”][6]，设置了false，就是用es6以上默认的规则。
- targets.browsers：设置兼容的浏览器范围
- >1%：全球有超过1%的人使用的浏览器
- "last 2 versions"：针对各个浏览器的最新的两个版本
- "not ie <= 8"：ie版本不能小于等于8
- stage-x(stage-0/1/2/3/4)：stage-x和上面的es2015等有些类似，但是它是按照JavaScript的提案阶段区分的，一共有5个阶段。而数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推。
- "plugins":["transform-runtime"：引用插件来处理代码的转换，transform-runtime用来处理全局函数和优化babel编译

ECMAScript6学习1

ECMAScript6简介

猜你喜欢