Babel相关概念及在webpack中的配置

1.javascript规范

javascript是网景公司开发的一种脚本语言，1996年的时候以ECMAScript的名字正式成为一种标准。2007年的时候发布了版本es5，然后在随后近10年里js并没有大的变化。所以现在的浏览器都可以很好的支持es5。这一局面直到2015年被打破。2015年6月，TC39（javascript标准的制定组织）公布了新版本的js语言——ES6。而且从ES6开始，TC39规定每年都要发布一个js的新版本，新版本将包含年号，都是以ESxxxx的方式进行命名。所以2015年发布的ES6又叫ES2015，2016年发布的新的js版本就叫ES2016，2017年发布的新的js版本就叫ES2017…

因为版本都是向前兼容的，就是老版本js版本中规定的语法和api在新版本的js中同样也会合理的。所以我们可以想到后面的规范肯定是包含前面的规范的，也就是ES2016版本的js规范是包含ES2015(ES6)规范的，ES2017是包含ES2016的也包含ES2015的。针对不同的规范，Babel也提供了对应的转换器。

babel-preset-es2015 将es2015版本的js转译为es5。

babel-preset-es2016 将es2016版本的js转译为es5。

babel-preset-es2017 将es2017版本的js转译为es5。

在转译过程中遇到更高版本的js语法，babel是会直接忽略的。

---

2.javascript规范制作的四个阶段

Stage0 ：任何尚未提交为正式提案的讨论，想法，改变或对已有规范的补充建议都被认为是一个稻草人草案（“strawman” proposal），但只有TC39成员可以提出此阶段的草案。

Stage1 ：此阶段，稻草人草案升级为正式化的提案，并将逐步解决多部门关切的问题，如与其他提案的相互之间会有什么影响，这一草案具体该如何实施等问题。人们需要对这些问题提供具体的解决方案。stage1的提案通常还需要包括API描述，拥有说明性使用示例，并对语义和算法进行讨论，一般来说草案在这一阶段会经历巨大的变化。

Stage2 ：此阶段，草案就有了初始的规范。通过polyfill（打补丁。编写一些代码实现浏览器之前不支持的功能），开发者可以开始使用这一阶段的草案了，一些浏览器引擎也会逐步对这一阶段的规范的提供原生支持，此外通过使用构建工具（类似babel的工具）也可以编译源代码为现有引擎可以执行的代码，这些方法都使得这一阶段的草案可以开始被使用了。

State3 ：此阶段的规范就属于候选推荐规范了，这一阶段之后变化就不会那么大了，要达到这一阶段需要满足以下条件：

• 规范的编辑和指定的审阅者必须在最终规范上签字；

• 用户也应该对该提议感兴趣；

• 提案必须至少被一个浏览器原生支持；

• 拥有高效的ployfill，或者被Babel支持；

Stage4 ：此阶段的提案必须有两个独立的通过验收测试的实现，进入第4阶段的提案将包含在 ECMAScript 的下一个修订版中。

针对js规范的不同阶段，babel也提供了对应的转译器

• Stage0：preset-stage-0

• Stage1：preset-stage-1

• Stage2：preset-stage-2

• Stage3：preset-stage-3

不同阶段的转译器之间是包含的关系，preset-stage-0转译器除了包含了preset-stage-1的所有功能还增加了transform-do-expressions插件和transform-function-bind插件，同样preset-stage-1转译器除了包含preset-stage-2的全部功能外还增加了一些额外的功能。

---

3.babel转译插件、转译器

转译插件，转译插件是用来转译单一功能的插件，比如transform-es2015-arrow-functions，这个插件只负责转译es2015新增的箭头函数。

转译器，转译器是一系列转译插件的集合。比如babel-preset-es2015就包含了es2015新增语法的所有转译插件，比如包含transform-es2015-arrow-functions（es2015箭头函数转译插件）、transform-es2015-classes(es2015 class类转译插件)等。

js规范新增的每个语法都有对应的babel插件，因此babel插件众多。为了便于管理，会把某些插件集合在一起，构成一个转译器。要不然如果我们想转译es2015的语法就要安装一大堆插件了，有了转译器之后我们只需要安装一个转译器就可以了。babel的转译器根据用途的不同也分了不同给的类，这些类非常多，所以babel看起来很混乱。不过大体上babel的转译器分为3类。

• 语法转译器，这些转译器只负责转译js最新的语法，并不负责转译js新增的api和全局对象。这类转译器包括babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等，以后肯定还会有新的转译器加入，不过你只要理解转译器就是一堆转译插件的集合就可以了。

• 补丁转译器，这些转译器只负责转译js最新的api和全局对象。比如浏览器不支持String新增的String.padStart方法和Promise全局对象。通过babel-profill转译，我们可以通过其他代码来让浏览器实现类似String.padStart和Promise的功能。

• jsx和flow插件，这类转译器用来转译JSX语法和移除类型声明的，使用Rect的时候你将用到它，转译器名称为babel-preset-react。

---

4.常见的几种babel转译器和插件

• babel-preset-env
  

  最常用的转译器。通过在.babelrc中配置env选项，可以让代码兼容不同版本的浏览器或者node。浏览器或者node已经支持的语法将不再转译了，不支持的才转译。如果不配置env选项，该转译器等同于babel-preset-latest。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

• babel-preset-es2015
  转译器，将es2015版本的js代码转译为es5代码，对于es2016版本的代码或者es2017版本的代码不转译。

• babel-preset-latest
  转译器，将最新版本的js代码转译为es5代码。不推荐使用，已经废除。建议使用babel-preset-env代替

• babel-preset-react
  转译器，剥离流类型并将JSX转换为createElement调用，主要在转译react代码的时候使用。

• 兼容ie浏览器的转译器
  要兼容老版本的ie浏览器，可以使用对应的es3和es5插件

es3-member-expression-literals
es3-property-literals
es5-property-mutators

5.babel最常见配置选项

• presets
  配置你要使用的转译器。使用转译器的顺序是按照转译器在数组中的反顺序进行调用的。先使用数组最末尾的转译器，然后使用倒数第2个，倒数第3个，依次类推。比如使用下面命令的时候，先使用stage-2转译器转译，再react转译器转译，最后使用es2015转译器转译。

{
  "presets": [
    "es2015",
    "react",
    "stage-2"
  ]
}

• plugins
  配置转译所需要的插件。使用插件的顺序是按照插件在数组中的顺序依次调用的。比如如下命令，转译的时候先使用transform-decorators-legacy转译，再使用transform-class-properties转译。

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

注意：plugins和presets的顺序
1. 如果同时存在plugins和presets，则先使用plugins转译
2. plugin的调用顺序是从第一个到最后一个，
3. presets的调用的顺序是相反的，从最后一个到第一个

6.在webpack中使用babel。

• 安装webpack及babel相关组件;

  npm install –save-dev webpack
  npm install –save-dev babel-preset-env babel-loader

• 创建webpack.config.js文件;
  在根目录下创建webpack.config.js文件，内容如下。

var path = require("path");
module.exports = {  
    entry: './src/person.js',  
    output: {  
        path: path.resolve(__dirname,"dist"),  
        filename: 'bundle.[name].js',  
    },  
    module: {  
        loaders: [{  
            test: /\.jsx?$/,  
            exclude: /node_modules/,  
            loader: 'babel-loader'
        }]  
    }  
}  

• 创建.babelrc文件

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}