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

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

在Vue CLI的配置項中，我們需要通過一個叫做module的屬性來進行規則配置。其中rules是一個數組，每項都是一個針對某類型文件進行處理的規則配置。在我們這個場景下，我們主要需要關心的是.js類型的文件。

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

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

對于babel的配置項，我們都需要提供給它一個presets和plugins的數組，分別代表著平時在項目中手動引入的babel語法集、以及自定義的插件。

具體來講，只需要填寫@babel/preset-env就能夠利用最新的ECMAScript規范來轉換js代碼了，因為它可以智能地根據瀏覽器支持情況進行轉換，避免了我們寫大量重復的兼容性代碼。

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

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

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