.babelrc详解

  babel是一种js语法编译器，在前端开发过程中，由于浏览器的版本和兼容性问题，很多js的新方法和特性的使用都受到了限制。使用babel可以将代码中js代码编译成兼容绝大多数主流浏览器的代码。

        babel6.X版本之后，所有的插件都是可插拔的，也就是说只安装babel依然无法正常的工作，我们需要配置对应的.babelrc文件才能起作用。

        .babelrc文件需要的配置项主要有预设(presets)和插件(plugins)。

        1、预设(presets)的作用是为babel安装指定的插件，插件命名采用babel-preset-xxx的形式，安装时使用npm安装，如npm install babel-preset-es2015。之后在.babelrc文件里进行配置，如图所示：

        其中xxx是npm安装时的插件名，options是插件相应的参数，主要参数有

        a)targets:{[string]:number}，默认{}  指定需要支持的环境，如chrome、safari、ie等，甚至可以指定版本，如node:6.5，或者node:current表示使用当前的版本。

        b)browers:Array|string 默认[]，浏览器列表，(不太理解，后续再研究)。

        c)loose:boolean，默认false  是否使用宽松模式，如果设置为true，只要plugins中的插件允许，都会采用宽松模式。

        d)debug:boolean 默认false 编译时是否去掉console.log。

        e)whitelist 默认[]，设置一直引入的plugins列表。

        2、插件(plugins)

        presets是插件plugins的预设，也就是说直接需要不需要的插件一起引入，如果不想使用presets，可以单独使用plugins对某个功能进行单独的引入。另外，有一些方法是presets中不提供的，如果要使用就需要单独引用了，比如：

        a)transform-runtime：解决编译中产生的重复的工具函数，减小代码体积。

        b)transform-remove-console：编译后的代码会移除console.*

        plugins/presets排序遵循下列标准： 

        1、plugins会先于presets进行编译

        2、plugins会按照数组index的增序进行编译

        3、presets会按照数组index的降序进行编译

注：

check-es2015-constants // 检验const常量是否被重新赋值

transform-es2015-arrow-functions // 编译箭头函数

transform-es2015-block-scoped-functions // 函数声明在作用域内

transform-es2015-block-scoping // 编译const和let

transform-es2015-classes // 编译class

transform-es2015-computed-properties // 编译计算对象属性

transform-es2015-destructuring // 编译解构赋值

transform-es2015-duplicate-keys // 编译对象中重复的key，其实是转换成计算对象属性

transform-es2015-for-of // 编译for...of

transform-es2015-function-name // 将function.name语义应用于所有的function

transform-es2015-literals // 编译整数(8进制/16进制)和unicode

transform-es2015-modules-commonjs // 将modules编译成commonjs

transform-es2015-object-super // 编译super

transform-es2015-parameters // 编译参数，包括默认参数，不定参数和解构参数

transform-es2015-shorthand-properties // 编译属性缩写

transform-es2015-spread // 编译展开运算符

transform-es2015-sticky-regex // 正则添加sticky属性

transform-es2015-template-literals // 编译模版字符串

transform-es2015-typeof-symbol // 编译Symbol类型

transform-es2015-unicode-regex // 正则添加unicode模式

transform-regenerator // 编译generator函数

transform-exponentiation-operator // 编译幂运算符

syntax-trailing-function-commas // function最后一个参数允许使用逗号

transform-async-to-generator // 把async函数转化成generator函数

作者：Zeroacexy
链接：https://www.jianshu.com/p/3881c9ee4497
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。