Vue是一款十分流行的前端框架，可以大幅度簡化前端開發(fā)的難度。而對(duì)于喜歡使用ES6語法的開發(fā)人員而言，babel則是不可或缺的工具。Vue CLI是Vue提供的官方腳手架，可以為我們自動(dòng)化地完成一個(gè)可運(yùn)行的Vue項(xiàng)目的搭建、管理等的工作，而本文我們將著重討論如何對(duì)Vue CLI進(jìn)行babel的配置。

module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}

在Vue CLI的配置項(xiàng)中，我們需要通過一個(gè)叫做module的屬性來進(jìn)行規(guī)則配置。其中rules是一個(gè)數(shù)組，每項(xiàng)都是一個(gè)針對(duì)某類型文件進(jìn)行處理的規(guī)則配置。在我們這個(gè)場景下，我們主要需要關(guān)心的是.js類型的文件。

使用test屬性，正則表達(dá)式可以細(xì)化地匹配我們需要的文件類型。exclude屬性可以讓我們找到符合test規(guī)則的文件后，再透過其他方式，刨除我們不需要對(duì)其進(jìn)行babel處理的文件。use屬性中的loader，很顯然指的是我們需要使用的babel-loader。

"presets": [
[
"@babel/preset-env",
{
"modules": false
}
 ]
],
"plugins": ["@babel/plugin-transform-runtime"]

對(duì)于babel的配置項(xiàng)，我們都需要提供給它一個(gè)presets和plugins的數(shù)組，分別代表著平時(shí)在項(xiàng)目中手動(dòng)引入的babel語法集、以及自定義的插件。

具體來講，只需要填寫@babel/preset-env就能夠利用最新的ECMAScript規(guī)范來轉(zhuǎn)換js代碼了，因?yàn)樗梢灾悄艿馗鶕?jù)瀏覽器支持情況進(jìn)行轉(zhuǎn)換，避免了我們寫大量重復(fù)的兼容性代碼。

最后一個(gè)需要特別指出的配置就是plugins里的@babel/plugin-transform-runtime.這個(gè)插件在進(jìn)行打包的時(shí)候告訴babel不用將公共方法插入到每個(gè)使用了這些方法的文件里，避免多次重復(fù)打包，縮減了包的大小。

yarn add @babel/plugin-transform-runtime @babel/runtime -D

上述配置項(xiàng)中對(duì)于@babel/plugin-transform-runtime代碼的引入有要求。它需要依賴于@babel/runtime這一插件，所以在使用之前需要先將其安裝進(jìn)我們的項(xiàng)目中。兩者都是實(shí)際運(yùn)行時(shí)的依賴項(xiàng)。我們使用yarn add指令將其安裝，然后順利地完成我們的配置工作。