说说babel

一.什么是babel

二.如何配置

三.配置babel-polyfill

 

一.什么是babel

The compiler for writing next generation JavaScript.

官网是这么说的，翻译一下就是下一代JavaScript 语法的编译器。

因为浏览器的版本和兼容性问题，不少JavaScript的新的方法都不能使用，等到能够大胆使用的时候，可能已通过去了好几年。Babel就所以而生，它可让你放心使用大部分的JavaScript的新的标准的方法，而后编译成兼容绝大多数的主流浏览器的代码。在升级到了Babel6.x版本以后，全部的插件都是可插拔的。这也意味着你安装了Babel以后，是不能工做的，须要配置对应的.babelrc文件才能发挥完整的做用。下面就对Babel的presets和plugins配置作一个简单解析。

 

二.如何配置

1. 配置文件.babelrc

    Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

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

2.   presets字段设定转码规则，官方提供如下的规则集，你能够根据须要安装。

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不一样阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

3.而后将这些规则加入.babelrc

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

4.其实看了上面的应该也明白了，presets，也就是一堆plugins的预设，起到方便的做用。若是你不采用presets，彻底能够单独引入某个功能，好比如下的设置就会引入编译箭头函数的功能。

{
"plugins": ["transform-es2015-arrow-functions"]
}
还有一些方法是presets中不提供的，这时候就须要单独引入了，介绍几个常见的插件。

transform-runtime
{
"plugins": ["transform-runtime", options]
}

主要有如下options选择。

helpers: boolean，默认true
使用babel的helper函数。

polyfill: boolean，默认true
使用babel的polyfill，可是不能彻底取代babel-polyfill。

regenerator: boolean，默认true
使用babel的regenerator。

moduleName: string，默认babel-runtime
使用对应module处理。

 

transform-remove-console
{
"plugins": ["transform-remove-console"]
}
使用这个插件，编译后的代码都会移除console.*，妈妈不再用担忧线上代码有多余的console.log了。固然不少时候，咱们若是使用webpack，会在webpack中配置。

 

5.Babel支持自定义的预设(presets)或插件(plugins)。若是你的插件在npm上，能够直接采用这种方式"plugins": ["babel-plugin-myPlugin"]，固然，你也能够缩写，此外，你还能够采用本地的相对路径引入插件，好比"plugins": ["./node_modules/asdf/plugin"]。

presets同理，示例

{

  "presets": [

    "es2015",   //对应babel-preset-es2015

    "react",      //对应babel-preset-react

    "stage-0"   //对应babel-preset-stage-0

  ],

  "plugins": [

    "transform-decorators-legacy",  //对应babel-plugin-transform-decorators-legacy

    "transform-runtime",                  //对应babel-plugin-transform-runtime

  ]

}

6.最简配置

{
"presets": [
"es2015",
"stage-0"
],
"plugins": ["transform-runtime"]
}

固然，若是你的项目须要react或者flow这些语法的编译，请在presets里加入对应的值便可

 

三.babel-polyfill

babel默认只转换新的javascript句法(syntax),而不转换新的api，好比Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise,以及一些定义在全局对象上的方法（好比Object.assign）都不会转码。

举例来讲，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。若是想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

安装命令
$ npm install --save babel-polyfill

使用方式
1.require('babel-polyfill')
2.import 'babel-polyfill'
3.module.exports={
entry:["babel-polyfill","./app/js"]
}
第三种方式适用于使用webpack构建的同窗，加入到webpack配置文件
Babel默认不转码的API很是多，详细清单能够查看babel-plugin-transform-runtime模块的definitions.js文件。

 

参考资料：https://excaliburhan.com/post/babel-preset-and-plugins.htmlhttps://www.jianshu.com/p/7bc7b0fadfc2http://www.ruanyifeng.com/blog/2016/01/babel.htmlhttps://www.cnblogs.com/liujb/p/BABEL-zhuan-ma-jie-huo.html#toc_2