.babelrc配置详解

2018-09-15  本文已影响0人  做最棒的

如何写好.babelrc？Babel的presets和plugins配置解析

什么是Babel

The compiler for writing next generation JavaScript.

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

作为前端开发，由于浏览器的版本和兼容性问题，很多JavaScript的新的方法都不能使用，等到可以大胆使用的时候，可能已经过去了好几年。Babel就因此而生，它可以让你放心使用大部分的JavaScript的新的标准的方法，然后编译成兼容绝大多数的主流浏览器的代码。

在升级到了Babel6.x版本之后，所有的插件都是可插拔的。这也意味着你安装了Babel之后，是不能工作的，需要配置对应的.babelrc文件才能发挥完整的作用。下面就对Babel的presets和plugins配置做一个简单解析。

所有配置根据官方文档提供，更新时间：2016-12-05。

预设(presets)

使用的时候需要安装对应的插件，对应babel-preset-xxx，例如下面的配置，需要npm install babel-preset-es2015。

{
"presets": ["es2015"]
}

env

{
"presets": ["env", options]
}

最近新增的一个选项，有以下options选择。

targets: { [string]: number }，默认{}

需要支持的环境，可选例如：chrome, edge, firefox, safari, ie, ios, node，甚至可以制定版本，如node: 6.5。也使用node: current代表使用当前的版本。

browsers: Array<string\ style="box-sizing: border-box;"> | string，默认[]</string>

浏览器列表，使用的是browserslist，可选例如：last 2 versions, > 5%。

loose: boolean，默认false

是否使用宽松模式，如果设置为true，plugins里的插件如果允许，都会采用宽松模式。

debug: boolean，默认false

编译是否会去掉console.log。

whitelist: Array<string\ style="box-sizing: border-box;">，默认[]</string>

设置一直引入的plugins列表。

es2015/es2016/es2017/latest

{  "presets": ["es2015"]}

es2015

使用es2015的，也就是我们常说的es6的相关方法，简单翻译如下，更多细节可以参看文档。

总结：常用的都覆盖了，并不需要太关心内容，如果使用某些还不支持的语法导致报错，可以回头查一下支持的列表。

es2016

使用es2016的相关插件，也就是es7，更多细节可以参看文档。

es2017

使用es2017的相关插件，也就是es8？，更多细节可以参看文档。

latest

latest是一个特殊的presets，包括了es2015，es2016，es2017的插件（目前为止，以后有es2018也会包括进去）。

react

react是一个比较特别的官方推荐的presets，大概是因为比较火吧。加入了flow，jsx等语法，具体可以看文档。

stage-x(stage-0/1/2/3/4)

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

stage-4

已完成的提案，与年度发布的release有关，包含2015年到明年正式发布的内容。例如，现在是2016年，stage-4应该是包括es2015，es2016，es2017。经过测试，babel-preset-stage-4这个npm包是不存在的，如果你单纯的需要stage-4的相关方法，需要引入es2015~es2017的presets。

stage-3

除了stage-4的内容，还包括以下插件，更多细节请看文档。

stage-2

除了stage-3的内容，还包括以下插件，更多细节请看文档。

stage-1

除了stage-2的内容，还包括以下插件，更多细节请看文档。

stage-0

除了stage-1的内容，还包括以下插件，更多细节请看文档。

插件(plugins)

其实看了上面的应该也明白了，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处理。

这里的options一般不用自己设置，用默认的即可。这个插件最大的作用主要有几下几点：

更多细节参见文档。

transform-remove-console

{  "plugins": ["transform-remove-console"]}

使用这个插件，编译后的代码都会移除console.*，妈妈再也不用担心线上代码有多余的console.log了。当然很多时候，我们如果使用webpack，会在webpack中配置。

这也告诉我们，Babel不仅仅是编译代码的工具，还能对代码进行压缩，也许有一天，你不再需要代码压缩的插件了，因为你有了Babel！

自定义预设或插件

Babel支持自定义的预设(presets)或插件(plugins)。如果你的插件在npm上，可以直接采用这种方式"plugins": ["babel-plugin-myPlugin"]，当然，你也可以缩写，它和"plugins": ["myPlugin"]是等价的。此外，你还可以采用本地的相对路径引入插件，比如"plugins": ["./node_modules/asdf/plugin"]。

presets同理。

plugins/presets排序

也许你会问，或者你没注意到，我帮你问了，plugins和presets编译，也许会有相同的功能，或者有联系的功能，按照怎么的顺序进行编译？答案是会按照一定的顺序。

总结

因为自己对.babelrc文件的设置有点疑问，花了大半天撸了下官方的文档。很多内容是英文的，可能翻译并不准确，希望大家多多指教。

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

这是我写了半天发现比较推荐的配置(真的是太简单了，还花了这么久去看文档)。强烈推荐使用transform-runtime。

当然，如果你的项目需要react或者flow这些语法的编译，请在presets里加入对应的值即可。如果你需要非实例方法"foobar".includes("foo")之类的方法，按需引入babel-polyfill。

本文主要给大家介绍的是关于es7 Decorators（修饰器）的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍：

ES6 Decorators（修饰器）

修饰器（Decorator）是一个函数，用来修改类的行为。这是ES7的一个提案，目前Babel转码器已经支持

我们在游戏大型项目种经常会用到的方法，现在es6直接支持

想要使用Decorator的话需要我们配置一下文件夹，配置一下环境

npm install babel-plugin-transform-decorators-legacy --save-dev

完事配置一下babelrc文件
"plugins": ["transform-decorators-legacy"]

先说一下装饰器的特点

装饰器本质是一个函数

@hometown hometown()

装饰对象可以使用多个装饰器

@hometown("山西")

@school

class Student{

constructor(name){

this.name=name;

}

@studyke("HTML")

study(){

console.log(this.name+" is studying"+this.ke+"!")

}

}

装饰器可以带参数

function hometown(diqu){

//target.home="广灵";

return function (target){`

target.home=diqu;

}

}

@hometown("山西")

class...

装饰器修饰 类

function school(target){

console.log("123")

target.schoolName="师徒课堂";

}

function hometown(diqu){

//target.home="广灵";

return function(target){

target.home=diqu;

}

}

function studyke(kemu){

return function(target){

target.ke=kemu;

}

}

@hometown("山西")
@school
class Student{

constructor(name){

this.name=name;

}

@studyke("HTML")

study(){

console.log(this.name+" is studying"+this.ke+"!")

}

}

console.log(Student.schoolName);

console.log(Student.home);

let l=new Student("xiaoA");

l.study();

@school

function Teacher(){

}

总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

上一篇下一篇

猜你喜欢

热点阅读