博客講解內(nèi)容如下：

　　1、babel是什么

　　2、javascript制作規(guī)范

　　3、babel轉(zhuǎn)譯器

　　4、babel的使用

　　5、常見(jiàn)的幾種babel轉(zhuǎn)譯器和插件

　　6、babel最常見(jiàn)配置選項(xiàng)

　　7、babel的其他

　　8、在webpack中使用babel

　　9、總結(jié)

凡是看到這個(gè)標(biāo)題點(diǎn)進(jìn)來(lái)的同學(xué)，相信對(duì)babel都有了一定的了解。babel使用起來(lái)很簡(jiǎn)單，簡(jiǎn)單到都沒(méi)有必要寫一篇文章去介紹，直接看看官方文檔就可以。所以我也在懷疑到底該不該寫這篇文章。想來(lái)想去還是決定動(dòng)手寫寫，原因是很簡(jiǎn)單，自己在剛開始接觸babel也出現(xiàn)過(guò)懵逼的狀態(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í)作用域等新的語(yǔ)法和Symbol、Promise等新的數(shù)據(jù)類型，但是這些語(yǔ)法和數(shù)據(jù)類型并不能夠馬上被現(xiàn)在的瀏覽器全部支持，為了能在現(xiàn)有的瀏覽器上使用js新的語(yǔ)法和新的數(shù)據(jù)類型，就需要使用一個(gè)轉(zhuǎn)譯器，將javascript中新增的特性轉(zhuǎn)為現(xiàn)代瀏覽器能理解的形式。babel就是做這個(gè)方面的轉(zhuǎn)化工作。

2、javascript制作規(guī)范

在這里有必要簡(jiǎn)單講一下javascript版本，我只是大體講下，javascript是網(wǎng)景公司開發(fā)的一種腳本語(yǔ)言，1996年的時(shí)候以ECMAScript的名字正式成為一種標(biāo)準(zhǔn)。2007年的時(shí)候發(fā)布了版本es5，然后在隨后近10年里js并沒(méi)有大的變化。所以現(xiàn)在的瀏覽器都可以很好的支持es5。這一局面直到2015年被打破。2015年6月，TC39（javascript標(biāo)準(zhǔn)的制定組織）公布了新版本的js語(yǔ)言——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)榘姹径际窍蚯凹嫒莸模褪抢习姹緅s版本中規(guī)定的語(yǔ)法和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)譯過(guò)程中遇到更高版本的js語(yǔ)法，babel是會(huì)直接忽略的。

在這里在簡(jiǎn)單講一下js新規(guī)范的制作過(guò)程。

js規(guī)范的制作分4個(gè)階段。

• Stage0 ：任何尚未提交為正式提案的討論，想法，改變或?qū)σ延幸?guī)范的補(bǔ)充建議都被認(rèn)為是一個(gè)稻草人草案（“strawman” proposal），但只有TC39成員可以提出此階段的草案。

• Stage1 ：此階段，稻草人草案升級(jí)為正式化的提案，并將逐步解決多部門關(guān)切的問(wèn)題，如與其他提案的相互之間會(huì)有什么影響，這一草案具體該如何實(shí)施等問(wèn)題。人們需要對(duì)這些問(wèn)題提供具體的解決方案。stage1的提案通常還需要包括API描述，擁有說(shuō)明性使用示例，并對(duì)語(yǔ)義和算法進(jìn)行討論，一般來(lái)說(shuō)草案在這一階段會(huì)經(jīng)歷巨大的變化。

• Stage2 ：此階段，草案就有了初始的規(guī)范。通過(guò)polyfill（打補(bǔ)丁。編寫一些代碼實(shí)現(xiàn)瀏覽器之前不支持的功能），開發(fā)者可以開始使用這一階段的草案了，一些瀏覽器引擎也會(huì)逐步對(duì)這一階段的規(guī)范的提供原生支持，此外通過(guò)使用構(gòu)建工具（類似babel的工具）也可以編譯源代碼為現(xiàn)有引擎可以執(zhí)行的代碼，這些方法都使得這一階段的草案可以開始被使用了。

• State3 ：此階段的規(guī)范就屬于候選推薦規(guī)范了，這一階段之后變化就不會(huì)那么大了，要達(dá)到這一階段需要滿足以下條件：

• 規(guī)范的編輯和指定的審閱者必須在最終規(guī)范上簽字；

• 用戶也應(yīng)該對(duì)該提議感興趣；

• 提案必須至少被一個(gè)瀏覽器原生支持；

• 擁有高效的ployfill，或者被Babel支持；

• Stage4 ：此階段的提案必須有兩個(gè)獨(dú)立的通過(guò)驗(yàn)收測(cè)試的實(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)在我們來(lái)講下babel轉(zhuǎn)譯器。

3、babel轉(zhuǎn)譯器

為了便于說(shuō)明，首先我們來(lái)定義兩個(gè)概念。

1. 轉(zhuǎn)譯插件，轉(zhuǎn)譯插件是用來(lái)轉(zhuǎn)譯單一功能的插件，比如transform-es2015-arrow-functions，這個(gè)插件只負(fù)責(zé)轉(zhuǎn)譯es2015新增的箭頭函數(shù)。

2. 轉(zhuǎn)譯器，轉(zhuǎn)譯器是一系列轉(zhuǎn)譯插件的集合。比如babel-preset-es2015就包含了es2015新增語(yǔ)法的所有轉(zhuǎn)譯插件，比如包含transform-es2015-arrow-functions（es2015箭頭函數(shù)轉(zhuǎn)譯插件）、transform-es2015-classes(es2015 class類轉(zhuǎn)譯插件)等。

js規(guī)范新增的每個(gè)語(yǔ)法都有對(duì)應(yīng)的babel插件，因此babel插件眾多。為了便于管理，會(huì)把某些插件集合在一起，構(gòu)成一個(gè)轉(zhuǎn)譯器。要不然如果我們想轉(zhuǎn)譯es2015的語(yǔ)法就要安裝一大堆插件了，有了轉(zhuǎn)譯器之后我們只需要安裝一個(gè)轉(zhuǎn)譯器就可以了。babel的轉(zhuǎn)譯器根據(jù)用途的不同也分了不同給的類，這些類非常多，所以babel看起來(lái)很混亂。不過(guò)大體上babel的轉(zhuǎn)譯器分為3類。

1. 語(yǔ)法轉(zhuǎn)譯器，這些轉(zhuǎn)譯器只負(fù)責(zé)轉(zhuǎn)譯js最新的語(yǔ)法，并不負(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)譯器加入，不過(guò)你只要理解轉(zhuǎn)譯器就是一堆轉(zhuǎn)譯插件的集合就可以了。

2. 補(bǔ)丁轉(zhuǎn)譯器，這些轉(zhuǎn)譯器只負(fù)責(zé)轉(zhuǎn)譯js最新的api和全局對(duì)象。比如瀏覽器不支持String新增的String.padStart方法和Promise全局對(duì)象。通過(guò)babel-profill轉(zhuǎn)譯，我們可以通過(guò)其他代碼來(lái)讓瀏覽器實(shí)現(xiàn)類似String.padStart和Promise的功能。

3. jsx和flow插件，這類轉(zhuǎn)譯器用來(lái)轉(zhuǎn)譯JSX語(yǔ)法和移除類型聲明的，使用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支持的使用場(chǎng)景非常多，可以在瀏覽器中使用（browser）也可以在命令行（cli），還可以是我們常見(jiàn)的gulp和webpack中。

以下以安裝babel-cli為例進(jìn)行說(shuō)明。babel更多的使用方法請(qǐng)點(diǎn)擊這里。

4.1、創(chuàng)建bebel項(xiàng)目

在本地磁盤上創(chuàng)建一個(gè)文件夾es6（名字任意），在該文件夾下打開命令行工具，初始化項(xiàng)目。

這個(gè)命令目的就是創(chuàng)建一個(gè)默認(rèn)的package.json文件。

4.2、本地安裝babel命令行工具

安裝babel的命令行工具的目的是為了在命令行使用babel。 

babel命令行工具可以全局安裝也可以本地安裝，官方文檔推薦本地安裝，原因有2點(diǎn)；

1. 本地安裝不同的項(xiàng)目可以使用不同版本的babel，你也可以單獨(dú)對(duì)某個(gè)項(xiàng)目的babel進(jìn)行升級(jí)等操作

2. 每個(gè)項(xiàng)目單獨(dú)安裝的意味著對(duì)計(jì)算機(jī)環(huán)境沒(méi)有依賴，便于移植

在命令行中繼續(xù)執(zhí)行如下命令

如果你已經(jīng)全局安裝了babel，可以使用如下的命令進(jìn)行卸載

這樣就已經(jīng)在本地安裝好babel了。

此時(shí)我的package.json文件如下（請(qǐng)忽略main字段）。

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

第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í)無(wú)論你是運(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)在還沒(méi)有src文件夾。可以先不用管它，稍后我們?cè)傩陆╯rc文件夾。

4.4、創(chuàng)建.babelrc配置文件

在cmd中鍵入以下命令。

這個(gè)時(shí)候你的文件夾里就多了一個(gè).babelrc文件了。windows是不能直接創(chuàng)建空文件名的文件的，所以必須通過(guò)命令行創(chuàng)建。

4.5、安裝babel的轉(zhuǎn)譯器

這里我們以babel-preset-env為例。

在命令行中執(zhí)行如下代碼就會(huì)安裝babel-preset-env轉(zhuǎn)譯器。

注意：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)都可以通過(guò)命令行添加，比如在命令行執(zhí)行 babel src -d lib --presets=env 等價(jià)于在.babelrc中配置 "presets":["env"]。當(dāng)然.babelrc要明顯方便很多。

babel在轉(zhuǎn)譯代碼的過(guò)程中會(huì)自動(dòng)讀取當(dāng)前目錄.babelrc配置文件，如果當(dāng)前目錄沒(méi)有的話就遍歷整個(gè)目錄樹去尋找，直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用這些配置選項(xiàng)來(lái)轉(zhuǎn)譯代碼。

關(guān)于.babelrc的注意點(diǎn)如下。

1、如果沒(méi)有.babelrc文件，或者沒(méi)有在其他文件中設(shè)置過(guò)babel的presets的配置選型，并且命令行中也沒(méi)有配置--presets，那么代碼是不會(huì)轉(zhuǎn)譯的。原es6代碼什么樣，轉(zhuǎn)譯后的代碼還是什么樣。

2、如果你的.babelrc或者你的命令行使用了你沒(méi)有安裝的轉(zhuǎn)譯器（presets），代碼就會(huì)報(bào)錯(cuò)

3、但.babelrc中的配置跟你在命令行中使用的配置沖突的時(shí)候，以.babelrc中的配置為準(zhǔn)

關(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中配置為例。

在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代碼即可，方便看出編譯后的效果）。編輯好代碼后保存。

4.9、轉(zhuǎn)譯es6代碼

在命令行工具中執(zhí)行npm run build 就可以發(fā)現(xiàn)目錄中多了一個(gè)lib文件夾，lib文件夾下有一個(gè)person.js的文件，這個(gè)文件就是src下的person.js文件轉(zhuǎn)譯后的代碼。

轉(zhuǎn)譯后的代碼如下：

5、常見(jiàn)的幾種babel轉(zhuǎn)譯器和插件

經(jīng)過(guò)上面的步驟我們已經(jīng)完成了轉(zhuǎn)譯代碼的工作，現(xiàn)在我們介紹下babel中常用的轉(zhuǎn)譯器和配置選項(xiàng)

5.1、babel-preset-env

轉(zhuǎn)譯器，最常用的轉(zhuǎn)譯器。通過(guò)在.babelrc中配置env選項(xiàng)，可以讓代碼兼容不同版本的瀏覽器或者node。瀏覽器或者node已經(jīng)支持的語(yǔ)法將不再轉(zhuǎn)譯了，不支持的才轉(zhuǎn)譯。如果不配置env選項(xiàng)，該轉(zhuǎn)譯器等同于babel-preset-latest。更多詳情和方法點(diǎn)這里

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插件

• es3-member-expression-literals

• es3-property-literals

• es5-property-mutators

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)譯器的適用場(chǎng)景是使用方法

6、babel最常見(jiàn)配置選項(xiàng)

babel的配置選項(xiàng)在命令行的使用規(guī)則是babel --name-value 比如我們使用es2015轉(zhuǎn)譯器，我們的命令就是

babel的配置選項(xiàng)非常多，每個(gè)轉(zhuǎn)譯器也都有自己的配置選項(xiàng)，關(guān)于babel的配置選項(xiàng)的詳細(xì)功能和使用方法，請(qǐng)點(diǎn)擊這里查看。我這里只介紹幾個(gè)常見(jiàn)的。

6.1、babelrc

默認(rèn)值為true，用于配置是否適用.babelrc和.babelignore文件，當(dāng)命令行中添加--no-babelrc選項(xiàng)的時(shí)候，表示忽略.babelrc和.babelignore文件。在.babelrc文件中配置babelrc個(gè)人測(cè)試沒(méi)有卵用。

6.2、env

默認(rèn)值為一個(gè)空對(duì)象{}. env用于配置代碼需要兼容的環(huán)境，比如你的代碼要在chrome52上運(yùn)行，可以這樣配置.babelrc。

配置代碼兼容最新的node，可以這樣設(shè)置.babelrc

6.3、ignore

忽略某些文件,默認(rèn)值為null，比如src文件夾下有person.js和foo.js兩個(gè)文件，轉(zhuǎn)譯的時(shí)候你要忽略src文件夾下的foo.js，可以這樣配置.babelrc。這樣就不再轉(zhuǎn)譯foo.js文件了

與ignore相對(duì)應(yīng)的是only選項(xiàng)，only表示只轉(zhuǎn)譯某些文件。

6.4、minified

是否壓縮轉(zhuǎn)譯后的代碼，默認(rèn)值為false

6.5、plugins

配置轉(zhuǎn)譯所需要的插件。使用插件的順序是按照插件在數(shù)組中的順序依次調(diào)用的。比如如下命令，轉(zhuǎn)譯的時(shí)候先使用transform-decorators-legacy轉(zhuǎn)譯，再使用transform-class-properties轉(zhuǎn)譯

6.6、presets

配置你要使用的轉(zhuǎn)譯器。使用轉(zhuǎn)譯器的順序是按照轉(zhuǎn)譯器在數(shù)組中的反順序進(jìn)行調(diào)用的。先使用數(shù)組最末尾的轉(zhuǎn)譯器，然后使用倒數(shù)第2個(gè)，倒數(shù)第3個(gè)，依次類推。比如使用下面命令的時(shí)候，先使用stage-2轉(zhuǎn)譯器轉(zhuǎn)譯，再react轉(zhuǎn)譯器轉(zhuǎn)譯，最后使用es2015轉(zhuǎn)譯器轉(zhuǎn)譯。

6.7、補(bǔ)充：plugins和presets的順序

詳情點(diǎn)這里

• 如果同時(shí)存在plugins和presets，則先使用plugins轉(zhuǎn)譯

• plugin的調(diào)用順序是從第一個(gè)到最后一個(gè)，

• presets的調(diào)用的順序是相反的，從最后一個(gè)到第一個(gè)

7、babel的其他

7.1、babel-node

bable-node是babel-cli自帶的命令，提供了一個(gè)支持ES6的REPL環(huán)境，它支持node的REPL環(huán)境的所有功能，而且可以直接運(yùn)行ES6代碼。為了體驗(yàn)下這個(gè)功能，我們需要全局安裝babel-cli。然后在命令行執(zhí)行下面的命令。

安裝

執(zhí)行命令就會(huì)輸出我們代碼執(zhí)行的結(jié)果

babel-node的詳細(xì)用法點(diǎn)擊這里

7.2、babel-register

引用自阮一峰babel講解

babel-register模塊會(huì)改寫require命令，為它加上一個(gè)鉤子。此后每當(dāng)使用require加載.js、.jsx、.es、.es6后綴名文件的時(shí)候，都會(huì)先用babel進(jìn)行轉(zhuǎn)碼

安裝

使用的時(shí)候必須先加載babel-register。

然后，就不需要手動(dòng)對(duì)index.js轉(zhuǎn)碼了。

需要注意的是，babel-register只會(huì)對(duì)require命令加載的文件轉(zhuǎn)碼，而不會(huì)對(duì)當(dāng)前文件轉(zhuǎn)碼。另外，由于它是實(shí)時(shí)轉(zhuǎn)碼，所以只適合在開發(fā)環(huán)境使用。

babel-register的詳細(xì)使用方法點(diǎn)擊這里

7.3、babel-core

babel-core主要在node等環(huán)境中使用，可以用來(lái)開發(fā)自己的babel轉(zhuǎn)譯器。直接調(diào)用babel的api對(duì)某些代碼或者某些文件進(jìn)行轉(zhuǎn)譯。

安裝

使用方法

babel-core的詳細(xì)使用方法點(diǎn)擊這里

8、在webpack中使用babel。

8.1、安裝webpack

8.2、安裝babel-preset-env和babel-loader。

如果你是跟著我這份教程一路看下來(lái)的，那么你babel-preset-env已經(jīng)安裝了。已經(jīng)安裝的話就不用再安裝了。記得要安裝babel-loader就好。

此時(shí)你的package.json如下。確保devDependencies中有babel-loader、babel-preset-env和webpack即可，其他的可以跟我不同。

8.3、創(chuàng)建webpack.config.js文件

在根目錄下創(chuàng)建webpack.config.js文件，內(nèi)容如下。

entry為入口文件，我們選擇當(dāng)前目錄下，src文件夾下的person.js文件作為入口。output為輸出選項(xiàng)，path為輸出的目錄，filename為輸出文件名。query選項(xiàng)為.babelrc中的配置選項(xiàng)。在webpack中設(shè)置了query字段后，就不再需要.babelrc文件了。

此時(shí)我們的目錄結(jié)構(gòu)是這樣子的。

-lib
-node_modules
-src
    -person.js
    -foo.js
-package.json
-webpack.config.js

8.4、運(yùn)行webpack。

在命令行中執(zhí)行webpack，webpack會(huì)自動(dòng)讀取webpack.config.js文件中的配置。然后對(duì)我們配置的文件進(jìn)行轉(zhuǎn)譯。

打開lib文件夾，我們發(fā)現(xiàn)多了一個(gè)轉(zhuǎn)譯后的文件person.compiled.js。

-lib
    -person.compiled.js
-node_modules
-src
    -person.js
    -foo.js
-package.json
-webpack.config.js

8.5、使用webpack轉(zhuǎn)譯多個(gè)文件

我們src文件夾下除了有person.js文件外，還有一個(gè)foo.js文件。但是我們上面的操作只轉(zhuǎn)譯了person.js文件，為了同時(shí)轉(zhuǎn)譯foo.js文件我們需要在person.js文件中引入foo.js

foo.js文件代碼如下：

我們?cè)趐erson.js文件頂部中添加require("./foo");；這樣就可以person.js文件中添加對(duì)foo.js的依賴。修改后的person.js代碼如下：

這樣在編譯后的文件person.compiled.js文件里，就包含了foo.js的代碼。

關(guān)于webpack的更多使用方法，請(qǐng)點(diǎn)擊查看webpack文檔

9、總結(jié)

關(guān)于babel的知識(shí)點(diǎn)大概就這些。

• babel常用的轉(zhuǎn)譯器是babel-preset-env。

• 常用的配置選項(xiàng)是plugins和presets

• 常用的使用場(chǎng)景是在webpack中

以上講的都是常用的，關(guān)于babel更細(xì)的知識(shí)點(diǎn)還需要你自己查看babel官方文檔。