vue-cli中的babel配置文件.babelrc實(shí)例詳解
本文介紹vue-cli腳手架工具根目錄的babelrc配置文件
介紹
es6特性瀏覽器還沒有全部支持，但是使用es6是大勢(shì)所趨，所以babel應(yīng)運(yùn)而生，用來(lái)將es6代碼轉(zhuǎn)換成瀏覽器能夠識(shí)別的代碼
babel有提供專門的命令行工具方便轉(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)境變量，如果沒有設(shè)置BABEL_ENV則使用NODE_ENV，如果都沒有設(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í)候覺得很難理解。
比如.babelrc文件，這個(gè)文件是用來(lái)設(shè)置轉(zhuǎn)碼的規(guī)則和插件的。
熟悉linux的話一定知道，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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家介紹了Vue基礎(chǔ)之偵聽器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的示例代碼
這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗(yàn)證的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-08-08
本文主要介紹了Vue中如何運(yùn)用TS語(yǔ)法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了Vue中的高德軌跡回放問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vant?如何修改van-collapse-item右側(cè)圖標(biāo)
這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用Vue編寫一個(gè)簡(jiǎn)單的日期選擇器,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11