博客講解內(nèi)容如下:
4、babel的使用
5、常見的幾種babel轉(zhuǎn)譯器和插件
6、babel最常見配置選項(xiàng)
凡是看到這個(gè)標(biāo)題點(diǎn)進(jìn)來的同學(xué),相信對(duì)babel都有了一定的了解。babel使用起來很簡單,簡單到都沒有必要寫一篇文章去介紹,直接看看官方文檔就可以。所以我也在懷疑到底該不該寫這篇文章。想來想去還是決定動(dòng)手寫寫,原因是很簡單,自己在剛開始接觸babel也出現(xiàn)過懵逼的狀態(tài),所以希望這篇文檔能給其他人以幫助。
1、babel是什么
babel官網(wǎng)正中間一行黃色大字寫著“babel is a javascript compiler”,翻譯一下就是babel是一個(gè)javascript轉(zhuǎn)譯器。為什么會(huì)有babel存在呢?原因是javascript在不斷的發(fā)展,但是瀏覽器的發(fā)展速度跟不上。以es6為例,es6中為javascript增加了箭頭函數(shù)、塊級(jí)作用域等新的語法和Symbol、Promise等新的數(shù)據(jù)類型,但是這些語法和數(shù)據(jù)類型并不能夠馬上被現(xiàn)在的瀏覽器全部支持,為了能在現(xiàn)有的瀏覽器上使用js新的語法和新的數(shù)據(jù)類型,就需要使用一個(gè)轉(zhuǎn)譯器,將javascript中新增的特性轉(zhuǎn)為現(xiàn)代瀏覽器能理解的形式。babel就是做這個(gè)方面的轉(zhuǎn)化工作。
2、javascript制作規(guī)范
在這里有必要簡單講一下javascript版本,我只是大體講下,javascript是網(wǎng)景公司開發(fā)的一種腳本語言,1996年的時(shí)候以ECMAScript的名字正式成為一種標(biāo)準(zhǔn)。2007年的時(shí)候發(fā)布了版本es5,然后在隨后近10年里js并沒有大的變化。所以現(xiàn)在的瀏覽器都可以很好的支持es5。這一局面直到2015年被打破。2015年6月,TC39(javascript標(biāo)準(zhǔn)的制定組織)公布了新版本的js語言——ES6。而且從ES6開始,TC39規(guī)定每年都要發(fā)布一個(gè)js的新版本,新版本將包含年號(hào),都是以ESxxxx的方式進(jìn)行命名。所以2015年發(fā)布的ES6又叫ES2015,2016年發(fā)布的新的js版本就叫ES2016,2017年發(fā)布的新的js版本就叫ES2017……。
因?yàn)榘姹径际窍蚯凹嫒莸?,就是老版本js版本中規(guī)定的語法和api在新版本的js中同樣也會(huì)合理的。所以我們可以想到后面的規(guī)范肯定是包含前面的規(guī)范的,也就是ES2016版本的js規(guī)范是包含ES2015(ES6)規(guī)范的,ES2017是包含ES2016的也包含ES2015的。針對(duì)不同的規(guī)范,Babel也提供了對(duì)應(yīng)的轉(zhuǎn)換器。
babel-preset-es2015 將es2015版本的js轉(zhuǎn)譯為es5。
babel-preset-es2016 將es2016版本的js轉(zhuǎn)譯為es5。
babel-preset-es2017 將es2017版本的js轉(zhuǎn)譯為es5。
在轉(zhuǎn)譯過程中遇到更高版本的js語法,babel是會(huì)直接忽略的。
在這里在簡單講一下js新規(guī)范的制作過程。
js規(guī)范的制作分4個(gè)階段。
Stage0 :任何尚未提交為正式提案的討論,想法,改變或?qū)σ延幸?guī)范的補(bǔ)充建議都被認(rèn)為是一個(gè)稻草人草案(“strawman” proposal),但只有TC39成員可以提出此階段的草案。
Stage1 :此階段,稻草人草案升級(jí)為正式化的提案,并將逐步解決多部門關(guān)切的問題,如與其他提案的相互之間會(huì)有什么影響,這一草案具體該如何實(shí)施等問題。人們需要對(duì)這些問題提供具體的解決方案。stage1的提案通常還需要包括API描述,擁有說明性使用示例,并對(duì)語義和算法進(jìn)行討論,一般來說草案在這一階段會(huì)經(jīng)歷巨大的變化。
Stage2 :此階段,草案就有了初始的規(guī)范。通過polyfill(打補(bǔ)丁。編寫一些代碼實(shí)現(xiàn)瀏覽器之前不支持的功能),開發(fā)者可以開始使用這一階段的草案了,一些瀏覽器引擎也會(huì)逐步對(duì)這一階段的規(guī)范的提供原生支持,此外通過使用構(gòu)建工具(類似babel的工具)也可以編譯源代碼為現(xiàn)有引擎可以執(zhí)行的代碼,這些方法都使得這一階段的草案可以開始被使用了。
State3 :此階段的規(guī)范就屬于候選推薦規(guī)范了,這一階段之后變化就不會(huì)那么大了,要達(dá)到這一階段需要滿足以下條件:
規(guī)范的編輯和指定的審閱者必須在最終規(guī)范上簽字;
用戶也應(yīng)該對(duì)該提議感興趣;
提案必須至少被一個(gè)瀏覽器原生支持;
擁有高效的ployfill,或者被Babel支持;
Stage4 :此階段的提案必須有兩個(gè)獨(dú)立的通過驗(yàn)收測試的實(shí)現(xiàn),進(jìn)入第4階段的提案將包含在 ECMAScript 的下一個(gè)修訂版中。
針對(duì)js規(guī)范的不同階段,babel也提供了對(duì)應(yīng)的轉(zhuǎn)譯器
Stage0:preset-stage-0
Stage1:preset-stage-1
Stage2:preset-stage-2
Stage3:preset-stage-3
不同階段的轉(zhuǎn)譯器之間是包含的關(guān)系,preset-stage-0轉(zhuǎn)譯器除了包含了preset-stage-1的所有功能還增加了transform-do-expressions插件和transform-function-bind插件,同樣preset-stage-1轉(zhuǎn)譯器除了包含preset-stage-2的全部功能外還增加了一些額外的功能……。
好了,javascript的制作規(guī)范大體講完了,現(xiàn)在我們來講下babel轉(zhuǎn)譯器。
3、babel轉(zhuǎn)譯器
為了便于說明,首先我們來定義兩個(gè)概念。
轉(zhuǎn)譯插件,轉(zhuǎn)譯插件是用來轉(zhuǎn)譯單一功能的插件,比如transform-es2015-arrow-functions,這個(gè)插件只負(fù)責(zé)轉(zhuǎn)譯es2015新增的箭頭函數(shù)。
轉(zhuǎn)譯器,轉(zhuǎn)譯器是一系列轉(zhuǎn)譯插件的集合。比如babel-preset-es2015就包含了es2015新增語法的所有轉(zhuǎn)譯插件,比如包含transform-es2015-arrow-functions(es2015箭頭函數(shù)轉(zhuǎn)譯插件)、transform-es2015-classes(es2015 class類轉(zhuǎn)譯插件)等。
js規(guī)范新增的每個(gè)語法都有對(duì)應(yīng)的babel插件,因此babel插件眾多。為了便于管理,會(huì)把某些插件集合在一起,構(gòu)成一個(gè)轉(zhuǎn)譯器。要不然如果我們想轉(zhuǎn)譯es2015的語法就要安裝一大堆插件了,有了轉(zhuǎn)譯器之后我們只需要安裝一個(gè)轉(zhuǎn)譯器就可以了。babel的轉(zhuǎn)譯器根據(jù)用途的不同也分了不同給的類,這些類非常多,所以babel看起來很混亂。不過大體上babel的轉(zhuǎn)譯器分為3類。
語法轉(zhuǎn)譯器,這些轉(zhuǎn)譯器只負(fù)責(zé)轉(zhuǎn)譯js最新的語法,并不負(fù)責(zé)轉(zhuǎn)譯js新增的api和全局對(duì)象。這類轉(zhuǎn)譯器包括babel-preset-env、babel-preset-es2015、babel-preset-es2016、babel-preset-es2017、babel-preset-latest等,以后肯定還會(huì)有新的轉(zhuǎn)譯器加入,不過你只要理解轉(zhuǎn)譯器就是一堆轉(zhuǎn)譯插件的集合就可以了。
補(bǔ)丁轉(zhuǎn)譯器,這些轉(zhuǎn)譯器只負(fù)責(zé)轉(zhuǎn)譯js最新的api和全局對(duì)象。比如瀏覽器不支持String新增的String.padStart方法和Promise全局對(duì)象。通過babel-profill轉(zhuǎn)譯,我們可以通過其他代碼來讓瀏覽器實(shí)現(xiàn)類似String.padStart和Promise的功能。
jsx和flow插件,這類轉(zhuǎn)譯器用來轉(zhuǎn)譯JSX語法和移除類型聲明的,使用Rect的時(shí)候你將用到它,轉(zhuǎn)譯器名稱為babel-preset-react
另外你可以對(duì)babel已有的轉(zhuǎn)譯器進(jìn)行改造或者創(chuàng)建新的轉(zhuǎn)譯器。如何創(chuàng)建babel轉(zhuǎn)譯器可以點(diǎn)這里。
4、babel的使用
babel支持的使用場景非常多,可以在瀏覽器中使用(browser)也可以在命令行(cli),還可以是我們常見的gulp和webpack中。
以下以安裝babel-cli為例進(jìn)行說明。babel更多的使用方法請(qǐng)點(diǎn)擊這里。
4.1、創(chuàng)建bebel項(xiàng)目
在本地磁盤上創(chuàng)建一個(gè)文件夾es6(名字任意),在該文件夾下打開命令行工具,初始化項(xiàng)目。
1 | D:\webpack\demo\es6>npm init -y |
這個(gè)命令目的就是創(chuàng)建一個(gè)默認(rèn)的package.json文件。
4.2、本地安裝babel命令行工具
安裝babel的命令行工具的目的是為了在命令行使用babel。
babel命令行工具可以全局安裝也可以本地安裝,官方文檔推薦本地安裝,原因有2點(diǎn);
本地安裝不同的項(xiàng)目可以使用不同版本的babel,你也可以單獨(dú)對(duì)某個(gè)項(xiàng)目的babel進(jìn)行升級(jí)等操作
每個(gè)項(xiàng)目單獨(dú)安裝的意味著對(duì)計(jì)算機(jī)環(huán)境沒有依賴,便于移植
在命令行中繼續(xù)執(zhí)行如下命令
1 | npm install --save-dev babel-cli |
如果你已經(jīng)全局安裝了babel,可以使用如下的命令進(jìn)行卸載
1 | npm uninstall --global babel-cli |
這樣就已經(jīng)在本地安裝好babel了。
此時(shí)我的package.json文件如下(請(qǐng)忽略main字段)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { "name" : "es6" , "version" : "1.0.0" , "description" : "" , "main" : "arrow.js" , //請(qǐng)忽略main字段 "scripts" : { "test" : "echo \"Error: no test specified\" && exit 1" }, "keywords" : [], "author" : "" , "license" : "ISC" , "devDependencies" : { "babel-cli" : "^6.24.1" } } |
4.3、在命令行中調(diào)用babel
本地安裝的babel是不能夠在直接命令行中運(yùn)行的,為了在命令行中運(yùn)行babel,我們有兩個(gè)方法,1是需要配置下package.json文件的scripts項(xiàng)。比如如下代碼,配置了一個(gè)build命令,運(yùn)行該命令(npm run build)的時(shí)候就會(huì)在命令行執(zhí)行babel src -d lib
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { "name" : "es6" , "version" : "1.0.0" , "description" : "" , "main" : "arrow.js" , "scripts" : { "build" : "babel src -d lib" }, "keywords" : [], "author" : "" , "license" : "ISC" , "devDependencies" : { "babel-cli" : "^6.24.1" } } |
第2個(gè)方法是你需要可以進(jìn)入node_modules文件夾,再進(jìn)入.bin文件夾,然后執(zhí)行在命令行中執(zhí)行babel src -d lib
。
推薦使用npm run build的方法。
這里需要解釋babel src -d lib
這個(gè)命令的意思。這個(gè)命令目的是把src文件夾下的文件都轉(zhuǎn)譯,轉(zhuǎn)譯后的文件放到lib目錄下。
關(guān)于babel的命令行使用方法請(qǐng)點(diǎn)這里
ps:此時(shí)無論你是運(yùn)行npm run build 還是運(yùn)行babel src -d lib命令(其實(shí)兩個(gè)方法本質(zhì)上都是一樣的,都是運(yùn)行babel src -d lib)命令行都會(huì)報(bào)錯(cuò),原因是現(xiàn)在還沒有src文件夾??梢韵炔挥霉芩?,稍后我們?cè)傩陆╯rc文件夾。
4.4、創(chuàng)建.babelrc配置文件
在cmd中鍵入以下命令。
1 | D:\webpack\demo\es6> type nul>.babelrc |
這個(gè)時(shí)候你的文件夾里就多了一個(gè).babelrc文件了。windows是不能直接創(chuàng)建空文件名的文件的,所以必須通過命令行創(chuàng)建。
4.5、安裝babel的轉(zhuǎn)譯器
這里我們以babel-preset-env為例。
在命令行中執(zhí)行如下代碼就會(huì)安裝babel-preset-env轉(zhuǎn)譯器。
1 | D:\webpack\demo\es6>npm install babel-preset- env --save-dev |
注意:babel命令行工具(babel-cli)跟babel轉(zhuǎn)譯器是兩個(gè)不同的東西,命令行工具并不具有轉(zhuǎn)譯代碼的功能,只是為了在命令行中使用babel。要轉(zhuǎn)碼必須安裝轉(zhuǎn)譯器,比如babel-preset-env轉(zhuǎn)譯器或者babel-preset-react轉(zhuǎn)譯器。要轉(zhuǎn)譯的時(shí)候,還要在.babelrc文件或者命令行中配置這些轉(zhuǎn)譯器(presets)選項(xiàng)
4.6、配置.babelrc文件
.babelrc用于配置除回調(diào)以外的所有babel api 選項(xiàng)。例如plugins和presets。plugins用于配置我們轉(zhuǎn)譯所需要的插件,presets用于配置我們所需要的轉(zhuǎn)譯器。
.babelrc不是必須的,我們?cè)?babelrc中配置的選項(xiàng)都可以通過命令行添加,比如在命令行執(zhí)行 babel src -d lib --presets=env
等價(jià)于在.babelrc中配置 "presets":["env"]
。當(dāng)然.babelrc要明顯方便很多。
babel在轉(zhuǎn)譯代碼的過程中會(huì)自動(dòng)讀取當(dāng)前目錄.babelrc配置文件,如果當(dāng)前目錄沒有的話就遍歷整個(gè)目錄樹去尋找,直到找到.babelrc文件或者含有"babel"字段的package.json文件,然后使用這些配置選項(xiàng)來轉(zhuǎn)譯代碼。
關(guān)于.babelrc的注意點(diǎn)如下。
1、如果沒有.babelrc文件,或者沒有在其他文件中設(shè)置過babel的presets的配置選型,并且命令行中也沒有配置--presets,那么代碼是不會(huì)轉(zhuǎn)譯的。原es6代碼什么樣,轉(zhuǎn)譯后的代碼還是什么樣。
2、如果你的.babelrc或者你的命令行使用了你沒有安裝的轉(zhuǎn)譯器(presets),代碼就會(huì)報(bào)錯(cuò)
3、但.babelrc中的配置跟你在命令行中使用的配置沖突的時(shí)候,以.babelrc中的配置為準(zhǔn)
1 2 3 | { "presets" :[ "env" ] } |
關(guān)于.babelrc文件的更多使用方法請(qǐng)點(diǎn)擊這里
4.7、.babelrc的替代方案
如果你不想生成.babelrc文件,你可以在你的package.json文件中對(duì)babel進(jìn)行配置。如果你使用gulp或者webpack之類的管理工具的話,也可以在這里工具的配置選項(xiàng)里添加babel的配置選項(xiàng)。
以下以在package.json中配置為例。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | { "name" : "es6" , "version" : "1.0.0" , "description" : "" , "main" : "arrow.js" , "scripts" : { "build" : "babel src -d lib --comments=true" }, "babel" :{ //babel選項(xiàng) "presets" :[ "es2015" ], "comments" : false }, "keywords" : [], "author" : "" , "license" : "ISC" , "devDependencies" : { "babel-cli" : "^6.24.1" , "babel-loader" : "^7.1.1" , "babel-preset-env" : "^1.6.0" , "babel-preset-es2015" : "^6.24.1" , "babel-preset-react" : "^6.24.1" , "webpack" : "^3.2.0" } } |
在package.json中配置babel等同于使用.babelrc文件
4.8、編寫es6代碼
因?yàn)槲覀兪褂玫腷abel命令是babel src -d lib
所以我們需要在目錄中創(chuàng)建一個(gè)叫src的文件夾。目錄結(jié)構(gòu)如下:
|-node_modules |-src |-.babelrc |-package.json
在src文件夾下我們創(chuàng)建一個(gè)person.js文件(文件名任意),編寫如下es6代碼(代碼任意,只有是es6代碼即可,方便看出編譯后的效果)。編輯好代碼后保存。
1 2 3 4 5 6 7 8 9 10 | class Person{ constructor(){ this .name= "bigbigStrong" } sayName(){ console.log(`my name is ${ this .name}`); } } var p = new Person(); p.sayName(); |
4.9、轉(zhuǎn)譯es6代碼
在命令行工具中執(zhí)行npm run build
就可以發(fā)現(xiàn)目錄中多了一個(gè)lib文件夾,lib文件夾下有一個(gè)person.js的文件,這個(gè)文件就是src下的person.js文件轉(zhuǎn)譯后的代碼。
1 | D:\webpack\demo\es6>npm run build |
轉(zhuǎn)譯后的代碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | "use strict" ;
var _createClass = function () { function defineProperties(target, props) { for ( var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false ; descriptor.configurable = true ; if ( "value" in descriptor) descriptor.writable = true ; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError( "Cannot call a class as a function" ); } }
var Person = function () { function Person() { _classCallCheck( this , Person);
this .name = "bigbigStrong" ; }
_createClass(Person, [{ key: "sayName" , value: function sayName() { console.log( "my name is " + this .name); } }]);
return Person; }();
var p = new Person(); p.sayName(); |
5、常見的幾種babel轉(zhuǎn)譯器和插件
經(jīng)過上面的步驟我們已經(jīng)完成了轉(zhuǎn)譯代碼的工作,現(xiàn)在我們介紹下babel中常用的轉(zhuǎn)譯器和配置選項(xiàng)
5.1、babel-preset-env
轉(zhuǎn)譯器,最常用的轉(zhuǎn)譯器。通過在.babelrc中配置env選項(xiàng),可以讓代碼兼容不同版本的瀏覽器或者node。瀏覽器或者node已經(jīng)支持的語法將不再轉(zhuǎn)譯了,不支持的才轉(zhuǎn)譯。如果不配置env選項(xiàng),該轉(zhuǎn)譯器等同于babel-preset-latest。更多詳情和方法點(diǎn)這里
1 2 3 4 5 6 7 8 9 | { "presets" : [ [ "env" , { "targets" : { "browsers" : [ "last 2 versions" , "safari >= 7" ] } }] ] } |
5.2、babel-preset-es2015
轉(zhuǎn)譯器,將es2015版本的js代碼轉(zhuǎn)譯為es5代碼,對(duì)于es2016版本的代碼或者es2017版本的代碼不轉(zhuǎn)譯。
5.3、babel-preset-latest
轉(zhuǎn)譯器,將最新版本的js代碼轉(zhuǎn)譯為es5代碼。不推薦使用,已經(jīng)廢除。建議使用babel-preset-env代替
5.4、babel-preset-react
轉(zhuǎn)譯器,剝離流類型并將JSX轉(zhuǎn)換為createElement調(diào)用,主要在轉(zhuǎn)譯react代碼的時(shí)候使用。
5.5、兼容ie瀏覽器的轉(zhuǎn)譯器
要兼容老版本的ie瀏覽器,可以使用對(duì)應(yīng)的es3和es5插件
5.6、總結(jié)
轉(zhuǎn)譯器就是一堆轉(zhuǎn)譯插件的集合。babel轉(zhuǎn)譯器很多,但是我們常用的就那幾個(gè)。如果要轉(zhuǎn)譯新版本的js的話,只需要使用babel-presets-env這一個(gè)轉(zhuǎn)譯器就可以了。
關(guān)于babel的更多轉(zhuǎn)譯器介紹,可以點(diǎn)擊這里查看。你可以點(diǎn)擊每一個(gè)轉(zhuǎn)譯器進(jìn)去查看轉(zhuǎn)譯器的適用場景是使用方法
6、babel最常見配置選項(xiàng)
babel的配置選項(xiàng)在命令行的使用規(guī)則是babel --name-value
比如我們使用es2015轉(zhuǎn)譯器,我們的命令就是
1 | babel src -d lib --presets=es2015 |
babel的配置選項(xiàng)非常多,每個(gè)轉(zhuǎn)譯器也都有自己的配置選項(xiàng),關(guān)于babel的配置選項(xiàng)的詳細(xì)功能和使用方法,請(qǐng)點(diǎn)擊這里查看。我這里只介紹幾個(gè)常見的。
6.1、babelrc
默認(rèn)值為true,用于配置是否適用.babelrc和.babelignore文件,當(dāng)命令行中添加--no-babelrc選項(xiàng)的時(shí)候,表示忽略.babelrc和.babelignore文件。在.babelrc文件中配置babelrc個(gè)人測試沒有卵用。
6.2、env
默認(rèn)值為一個(gè)空對(duì)象{}. env用于配置代碼需要兼容的環(huán)境,比如你的代碼要在chrome52上運(yùn)行,可以這樣配置.babelrc。
1 2 3 4 5 6 7 8 9 | { "presets" : [ [ "env" , { "targets" : { "chrome" : 52 } }] ] } |
配置代碼兼容最新的node,可以這樣設(shè)置.babelrc
1 2 3 4 5 6 7 8 9 | { "presets" : [ [ "env" , { "targets" : { "node" : "current" } }] ] } |
6.3、ignore
忽略某些文件,默認(rèn)值為null,比如src文件夾下有person.js和foo.js兩個(gè)文件,轉(zhuǎn)譯的時(shí)候你要忽略src文件夾下的foo.js,可以這樣配置.babelrc。這樣就不再轉(zhuǎn)譯foo.js文件了
1 2 3 4 | { "presets" :[ "env" ], "ignore" :[ "foo.js" ] } |
與ignore相對(duì)應(yīng)的是only選項(xiàng),only表示只轉(zhuǎn)譯某些文件。
6.4、minified
是否壓縮轉(zhuǎn)譯后的代碼,默認(rèn)值為false
1 2 3 4 5 | { "presets" :[ "env" ], "ignore" :[ "foo.js" ], "minified" : true } |
http://www.cnblogs.com/gg1234/p/7168750.html