如何寫好.babelrc遂跟？Babel的presets和plugins配置解析
什么是Babel
The compiler for writing next generation JavaScript.
官網(wǎng)是這么說的席怪，翻譯一下就是下一代JavaScript 語法的編譯器漓藕。
作為前端開發(fā)，由于瀏覽器的版本和兼容性問題畜隶，很多JavaScript的新的方法都不能使用，等到可以大膽使用的時候号胚，可能已經(jīng)過去了好幾年籽慢。Babel就因此而生，它可以讓你放心使用大部分的JavaScript的新的標準的方法猫胁，然后編譯成兼容絕大多數(shù)的主流瀏覽器的代碼箱亿。
在升級到了Babel6.x版本之后，所有的插件都是可插拔的弃秆。這也意味著你安裝了Babel之后届惋，是不能工作的，需要配置對應的.babelrc文件才能發(fā)揮完整的作用菠赚。下面就對Babel的presets和plugins配置做一個簡單解析脑豹。
所有配置根據(jù)官方文檔提供，更新時間：2016-12-05衡查。
預設(presets)
使用的時候需要安裝對應的插件瘩欺，對應babel-preset-xxx，例如下面的配置拌牲，需要npm install babel-preset-es2015俱饿。
{
"presets": ["es2015"]
}
env
{
"presets": ["env", options]
}
最近新增的一個選項，有以下options選擇塌忽。
targets: { [string]: number }拍埠，默認{}
需要支持的環(huán)境，可選例如：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的相關(guān)方法，簡單翻譯如下捆等，更多細節(jié)可以參看文檔滞造。
- check-es2015-constants // 檢驗const常量是否被重新賦值
- transform-es2015-arrow-functions // 編譯箭頭函數(shù)
- transform-es2015-block-scoped-functions // 函數(shù)聲明在作用域內(nèi)
- transform-es2015-block-scoping // 編譯const和let
- transform-es2015-classes // 編譯class
- transform-es2015-computed-properties // 編譯計算對象屬性
- transform-es2015-destructuring // 編譯解構(gòu)賦值
- transform-es2015-duplicate-keys // 編譯對象中重復的key，其實是轉(zhuǎn)換成計算對象屬性
- transform-es2015-for-of // 編譯for...of
- transform-es2015-function-name // 將function.name語義應用于所有的function
- transform-es2015-literals // 編譯整數(shù)(8進制/16進制)和unicode
- transform-es2015-modules-commonjs // 將modules編譯成commonjs
- transform-es2015-object-super // 編譯super
- transform-es2015-parameters // 編譯參數(shù)栋烤，包括默認參數(shù)谒养，不定參數(shù)和解構(gòu)參數(shù)
- 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函數(shù)
總結(jié)：常用的都覆蓋了，并不需要太關(guān)心內(nèi)容明郭，如果使用某些還不支持的語法導致報錯买窟，可以回頭查一下支持的列表。
es2016
使用es2016的相關(guān)插件达址，也就是es7蔑祟，更多細節(jié)可以參看文檔。
- transform-exponentiation-operator // 編譯冪運算符
es2017
使用es2017的相關(guān)插件沉唠，也就是es8疆虚？，更多細節(jié)可以參看文檔满葛。
- syntax-trailing-function-commas // function最后一個參數(shù)允許使用逗號
- transform-async-to-generator // 把async函數(shù)轉(zhuǎn)化成generator函數(shù)
latest
latest是一個特殊的presets径簿，包括了es2015，es2016嘀韧，es2017的插件（目前為止篇亭，以后有es2018也會包括進去）。
react
react是一個比較特別的官方推薦的presets锄贷，大概是因為比較火吧译蒂。加入了flow曼月，jsx等語法，具體可以看文檔柔昼。
stage-x(stage-0/1/2/3/4)
stage-x和上面的es2015等有些類似哑芹，但是它是按照JavaScript的提案階段區(qū)分的，一共有5個階段捕透。而數(shù)字越小聪姿，階段越靠后，存在依賴關(guān)系乙嘀。也就是說stage-0是包括stage-1的末购，以此類推。
stage-4
已完成的提案虎谢，與年度發(fā)布的release有關(guān)盟榴，包含2015年到明年正式發(fā)布的內(nèi)容。例如嘉冒，現(xiàn)在是2016年曹货，stage-4應該是包括es2015咆繁，es2016讳推，es2017。經(jīng)過測試玩般，babel-preset-stage-4這個npm包是不存在的银觅，如果你單純的需要stage-4的相關(guān)方法，需要引入es2015~es2017的presets坏为。
stage-3
除了stage-4的內(nèi)容究驴，還包括以下插件，更多細節(jié)請看文檔匀伏。
- transform-object-rest-spread // 編譯對象的解構(gòu)賦值和不定參數(shù)
- transform-async-generator-functions // 將async generator function和for await編譯為es2015的generator洒忧。
stage-2
除了stage-3的內(nèi)容，還包括以下插件够颠，更多細節(jié)請看文檔熙侍。
- transform-class-properties // 編譯靜態(tài)屬性(es2015)和屬性初始化語法聲明的屬性(es2016)。
stage-1
除了stage-2的內(nèi)容履磨，還包括以下插件蛉抓，更多細節(jié)請看文檔。
- transform-class-constructor-call // 編譯class中的constructor剃诅，在Babel7中會被移除
- transform-export-extensions // 編譯額外的exprt語法巷送，如export * as ns from "mod";細節(jié)可以看這個
stage-0
除了stage-1的內(nèi)容，還包括以下插件矛辕，更多細節(jié)請看文檔笑跛。
- transform-do-expressions // 編譯do表達式
- transform-function-bind // 編譯bind運算符付魔，也就是
::
插件(plugins)
其實看了上面的應該也明白了，presets飞蹂，也就是一堆plugins的預設抒抬，起到方便的作用。如果你不采用presets晤柄，完全可以單獨引入某個功能擦剑，比如以下的設置就會引入編譯箭頭函數(shù)的功能。
{ "plugins": ["transform-es2015-arrow-functions"]}
那么芥颈，還有一些方法是presets中不提供的惠勒，這時候就需要單獨引入了，介紹幾個常見的插件爬坑。
transform-runtime
{ "plugins": ["transform-runtime", options]}
主要有以下options選擇纠屋。
helpers: boolean，默認true
使用babel的helper函數(shù)盾计。
polyfill: boolean售担，默認true
使用babel的polyfill，但是不能完全取代babel-polyfill署辉。
regenerator: boolean族铆，默認true
使用babel的regenerator。
moduleName: string哭尝，默認babel-runtime
使用對應module處理哥攘。
這里的options一般不用自己設置，用默認的即可材鹦。這個插件最大的作用主要有幾下幾點：
- 解決編譯中產(chǎn)生的重復的工具函數(shù)逝淹，減小代碼體積
- 非實例方法的poly-fill，如
Object.assign桶唐，但是實例方法不支持栅葡，如"foobar".includes("foo")，這時候需要單獨引入babel-polyfill
更多細節(jié)參見文檔尤泽。
transform-remove-console
{ "plugins": ["transform-remove-console"]}
使用這個插件欣簇，編譯后的代碼都會移除console.*，媽媽再也不用擔心線上代碼有多余的console.log了安吁。當然很多時候醉蚁，我們?nèi)绻褂脀ebpack，會在webpack中配置鬼店。
這也告訴我們网棍，Babel不僅僅是編譯代碼的工具，還能對代碼進行壓縮妇智，也許有一天滥玷，你不再需要代碼壓縮的插件了氏身，因為你有了Babel！
自定義預設或插件
Babel支持自定義的預設(presets)或插件(plugins)惑畴。如果你的插件在npm上蛋欣，可以直接采用這種方式"plugins": ["babel-plugin-myPlugin"]，當然如贷，你也可以縮寫陷虎，它和"plugins": ["myPlugin"]是等價的。此外杠袱，你還可以采用本地的相對路徑引入插件尚猿，比如"plugins": ["./node_modules/asdf/plugin"]。
presets同理楣富。
plugins/presets排序
也許你會問凿掂，或者你沒注意到，我?guī)湍銌柫宋坪琾lugins和presets編譯庄萎，也許會有相同的功能，或者有聯(lián)系的功能塘安，按照怎么的順序進行編譯糠涛？答案是會按照一定的順序。
- 具體而言耙旦，plugins優(yōu)先于presets進行編譯脱羡。
- plugins按照數(shù)組的index增序(從數(shù)組第一個到最后一個)進行編譯。
- presets按照數(shù)組的index倒序(從數(shù)組最后一個到第一個)進行編譯免都。因為作者認為大部分會把presets寫成
["es2015", "stage-0"]。具體細節(jié)可以看這個帆竹。
總結(jié)
因為自己對.babelrc文件的設置有點疑問绕娘，花了大半天擼了下官方的文檔。很多內(nèi)容是英文的栽连，可能翻譯并不準確险领，希望大家多多指教。
{ "presets": [ "es2015", "stage-0" ], "plugins": ["transform-runtime"]}json
這是我寫了半天發(fā)現(xiàn)比較推薦的配置(真的是太簡單了秒紧，還花了這么久去看文檔)绢陌。強烈推薦使用transform-runtime。
當然熔恢，如果你的項目需要react或者flow這些語法的編譯脐湾，請在presets里加入對應的值即可。如果你需要非實例方法"foobar".includes("foo")之類的方法叙淌，按需引入babel-polyfill秤掌。
本文主要給大家介紹的是關(guān)于es7 Decorators（修飾器）的相關(guān)內(nèi)容愁铺，分享出來供大家參考學習，下面話不多說闻鉴，來一起看看詳細的介紹：
ES6 Decorators（修飾器）
修飾器（Decorator）是一個函數(shù)茵乱，用來修改類的行為。這是ES7的一個提案孟岛，目前Babel轉(zhuǎn)碼器已經(jīng)支持
我們在游戲大型項目種經(jīng)常會用到的方法瓶竭，現(xiàn)在es6直接支持
想要使用Decorator的話需要我們配置一下文件夾，配置一下環(huán)境
npm install babel-plugin-transform-decorators-legacy --save-dev
完事配置一下babelrc文件
"plugins": ["transform-decorators-legacy"]
先說一下裝飾器的特點
裝飾器本質(zhì)是一個函數(shù)
@hometown hometown()
裝飾對象可以使用多個裝飾器
@hometown("山西")
@school
class Student{
constructor(name){
this.name=name;
}
@studyke("HTML")
study(){
console.log(this.name+" is studying"+this.ke+"!")
}
}
裝飾器可以帶參數(shù)
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(){
}
總結(jié)
以上就是這篇文章的全部內(nèi)容渠羞，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助在验，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持堵未。
