快捷導(dǎo)航

vue-cli中的babel配置文件.babelrc實(shí)例詳解

更新時(shí)間：2018年02月22日 11:41:43 作者：qz奔跑的馬

Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧

本文介紹vue-cli腳手架工具根目錄的babelrc配置文件

介紹

es6特性瀏覽器還沒(méi)有全部支持，但是使用es6是大勢(shì)所趨，所以babel應(yīng)運(yùn)而生，用來(lái)將es6代碼轉(zhuǎn)換成瀏覽器能夠識(shí)別的代碼

babel有提供專(zhuān)門(mén)的命令行工具方便轉(zhuǎn)碼，可以自行去了解

vue-cli腳手架的.babelrc文件

{
 // 此項(xiàng)指明，轉(zhuǎn)碼的規(guī)則
 "presets": [
 // env項(xiàng)是借助插件babel-preset-env，下面這個(gè)配置說(shuō)的是babel對(duì)es6,es7,es8進(jìn)行轉(zhuǎn)碼，并且設(shè)置amd,commonjs這樣的模塊化文件，不進(jìn)行轉(zhuǎn)碼
 ["env", { "modules": false }],
 // 下面這個(gè)是不同階段出現(xiàn)的es語(yǔ)法，包含不同的轉(zhuǎn)碼插件
 "stage-2"
 ],
 // 下面這個(gè)選項(xiàng)是引用插件來(lái)處理代碼的轉(zhuǎn)換，transform-runtime用來(lái)處理全局函數(shù)和優(yōu)化babel編譯
 "plugins": ["transform-runtime"],
 // 下面指的是在生成的文件中，不產(chǎn)生注釋
 "comments": false,
 // 下面這段是在特定的環(huán)境中所執(zhí)行的轉(zhuǎn)碼規(guī)則，當(dāng)環(huán)境變量是下面的test就會(huì)覆蓋上面的設(shè)置
 "env": {
 // test 是提前設(shè)置的環(huán)境變量，如果沒(méi)有設(shè)置BABEL_ENV則使用NODE_ENV，如果都沒(méi)有設(shè)置默認(rèn)就是development
 "test": {
  "presets": ["env", "stage-2"],
  // instanbul是一個(gè)用來(lái)測(cè)試轉(zhuǎn)碼后代碼的工具
  "plugins": ["istanbul"]
 }
 }
}

ps:下面給大家介紹關(guān)于.babelrc配置文件

關(guān)于react項(xiàng)目結(jié)構(gòu)，有很多配置文件，有時(shí)候覺(jué)得很難理解。

比如.babelrc文件，這個(gè)文件是用來(lái)設(shè)置轉(zhuǎn)碼的規(guī)則和插件的。

熟悉linux的話(huà)一定知道，rc結(jié)尾的文件通常代表運(yùn)行時(shí)自動(dòng)加載的文件，配置等等。在babel6中，這個(gè)文件必不可少。
里面可以對(duì)babel命令進(jìn)行配置，以后再使用babel的cli的時(shí)候，可以少一些配置。還有一個(gè)env字段，可以對(duì)BABEL_ENV或者NODE_ENV指定的不同的環(huán)境變量，進(jìn)行不同的編譯操作。

總結(jié)

以上所述是小編給大家介紹的vue-cli中的babel配置文件.babelrc實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: