vue-cli腳手架的.babelrc文件用法說明

更新時(shí)間：2020年09月11日 14:02:47 作者：以夢為馬papapa

這篇文章主要介紹了vue-cli腳手架的.babelrc文件用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

雖然es6還沒被瀏覽器全部支持，但是使用es6是大勢所趨，所以babel應(yīng)運(yùn)而生將es6代碼轉(zhuǎn)換成瀏覽器能夠識別的代碼

什么是.babelrc文件呢？熟悉linux的同學(xué)一定知道，rc結(jié)尾的文件通常代表運(yùn)行時(shí)自動(dòng)加載的文件，配置等等，類似bashrc,zshrc

這個(gè)文件是用來設(shè)置轉(zhuǎn)碼的規(guī)則和插件

vue-cli腳手架的.babelrc文件

{
 // 此項(xiàng)指明，轉(zhuǎn)碼的規(guī)則
 "presets": [
 // env項(xiàng)是借助插件babel-preset-env，下面這個(gè)配置說的是babel對es6,es7,es8進(jìn)行轉(zhuǎn)碼，并且設(shè)置amd,commonjs這樣的模塊化文件，不進(jìn)行轉(zhuǎn)碼
 ["env", {
  "modules": false ,
  "targets": {//需要支持的環(huán)境
  "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
  }
 }],
 // 下面這個(gè)是不同階段出現(xiàn)的es語法，包含不同的轉(zhuǎn)碼插件
 // stage-x和es2015等有些類似，但是它是按照J(rèn)avaScript的提案階段區(qū)分的，一共有5個(gè)階段。
 //而數(shù)字越小，階段越靠后，存在依賴關(guān)系。也就是說stage-0是包括stage-1的，以此類推。
 "stage-2"
 ],
 // 下面這個(gè)選項(xiàng)是引用插件來處理代碼的轉(zhuǎn)換，transform-runtime用來處理全局函數(shù)和優(yōu)化babel編譯，強(qiáng)烈推薦使用transform-runtime
 "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è)用來測試轉(zhuǎn)碼后代碼的工具
  "plugins": ["istanbul"]
 }
 }
}

browserslist: Library to share supported browsers list between different front-end tools. It is used in:

Autoprefixer

babel-preset-env

eslint-plugin-compat

stylelint-no-unsupported-browser-features

postcss-normalize

補(bǔ)充知識：vue cli3 element-ui懶加載按需加載ui組件

前言

vue cli3.x + UI框架開發(fā)時(shí)，經(jīng)常實(shí)際只用到的 UI框架提供的幾個(gè)組件，而每次我們是全部引入，這會(huì)照成程序需要消耗更多的資源，尤其是在移動(dòng)端（例如使用 mint ui）,在性能上會(huì)有更大的影響，照成不好的用戶體驗(yàn)。

接下來記錄以 vue cli3.x +element ui 為例實(shí)現(xiàn)按需加載組件。

未引入 element 插件時(shí)

引入 element ui（npm i element-ui -S）

如下圖，可見 app.js 增加了 5M 的數(shù)據(jù)。

// main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

只引入 element 的部分組件

如下圖，可見雖然我們只引用了兩個(gè)組件，但是 app.js 的大小幾乎不變，這樣沒有實(shí)現(xiàn)按需加載的效果。

import { Button, Select } from 'element-ui'
// 此時(shí)的樣式必須要引入，否則組件將沒有樣式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Button)
Vue.use(Select)

實(shí)現(xiàn)按需加載

1.安裝插件 npm i babel-plugin-component -D

2.配置 babel.config.js

module.exports = {
 presets: [
  '@vue/app',
  ['@babel/preset-env', // 添加 babel-preset-env 配置
   {
    'modules': false
   }
  ]
 ],
 plugins: [
  [
   'component',
   {
    'libraryName': 'element-ui', // 按需引入的組件庫
    'styleLibraryName': 'theme-chalk' // 按需引入的樣式
   }
  ]
 ]
}

把 main.js 也修改下：

import { Button, Select } from 'element-ui'
// 此時(shí)的樣式不需要引入了，樣式自動(dòng)按需來引入
// import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Button)
Vue.use(Select)

Vue.config.productionTip = false

new Vue({
 router,
 render: h => h(App)
}).$mount('#app')

配置好后重新 npm run serve 下，此時(shí)的 app.js 相對于沒有引入插件時(shí)只增加了幾百 k 的大小，這樣就實(shí)現(xiàn)了按需加載。