babel的presets和plugins总结(持续更新)

babel--------下一代JavaScript语法编译器
近几年, 前端开发迅猛发展, 出现了很多新的特性, 这些特性, 既方便又高效, 但是由于浏览器的兼容性问题, 却不能让这些新的特性发挥做用, babel就是为了解决这个问题而诞生的.babel可以将这些拥有新特性的代码编译成浏览器识别的js代码.
在升级到babel 6之后, babel的核心代码已经把插件剥离出去, 如果想正常的运转babel就得安装相应的预设和插件.
babel-presets和babel-plugins的使用方法:
第一步: npm instatll --save-dev XXX 的方式安装响应模块(记得在必须安装babel-core模块);
第二步: 在跟目录下创建.babelrc文件, 并配置:如下

{
     "presets": [ "preset1", "preset2" ],//数组里边是需要使用preset, 注意要加"", 
     "plugins": [ "plugin1", "plugin2" ] //数组里边是需要试用的plugin
}
//插件带参数的写法
{  
    "presets": [ "env", { option }],
    "plugins": [ 
        [ "plugin1", { "参数1": true } ]
    ]
}

1.babel-preset-env: 用于编译es6语法, 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。

2.babel-preset-es2015: 用于编译es6语法.

3.babel-preset-es2017:用于编译es7语法.

4.babel-preset-latest:一个特殊的presets，包括了es2015，es2016，#####5.es2017的插件（目前为止，以后有es2018也会包括进去）。

6.babel-preset-react: 用于编译jsx和flow语法加入

7.babel-preset-stage-x(stage-0/1/2/3/4)

stage-x和上面的es2015等有些类似，但是它是按照JavaScript的提案阶段区分的，一共有5个阶段。而数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推, stage-0包含了所有个stage.

8.babel-preset-stage-0:

包含了[transform-do-expressions]和[transform-function-bind], do 可以在react组件中使用if/else判断, function-bind 支持 ::操作符, 切换上下文 this::func 等价于 func.bind(this)

9.babel-plugin-transfrom-runtime:

用来解决编译中产生的重复的工具函数，减小代码体积,非实例方法的poly-fill, 如Object.assign, 但是实例方法不支持,如"foobar".includes("foo"),这时候需要单独引入babel-polyfill.

10.babel-polyfill:

babel只会对es6或更高版本的javaScript的句法做转译, 而不会对它新添加的方法进行转译, babel-polyfill就是解决这个问题的, 使用方法:

//安装模块
npm install --save-dev babel-polyfill
//在文件顶部引用
import 'babel-polyfill'
require('babel-polyfill')
//webpack配置在引用到entry中
.module.exports = {
　　entry: ["babel-polyfill", "./app/js"]
};