本文我們來看一下官方的這個 @vue/cli-plugin-babel
先看一下源碼文件：
generator.js
index.js
核心的有 2 個文件廓奕，我們主要第一個 index.js古涧，最外層結(jié)構(gòu)多是插件式的標(biāo)準(zhǔn)結(jié)構(gòu)：
module.exports = (api, options) => {
// ...
}
這里因為我們要擴展 webpack 的配置擦囊，所以使用了：api.chainWebpack
api.chainWebpack(webpackConfig => {
// ...
})
我們先執(zhí)行 vue inspect --rule js 看一下最終生成的配置：
/* config.module.rule('js') */
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/***/node_modules/.cache/babel-loader',
cacheIdentifier: '2f4347b9'
}
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
}
對照著這個我們來寫相對會簡單一點：
1、配置 module罐呼、 rule 和 test
注意這里的 rule 是 js冤议，也就是我們之前 vue inspect 用到的
const jsRule = webpackConfig.module
.rule('js')
.test(/\.jsx?$/)
2、配置 exclude
通過 add 方法
.exclude
.add(filepath => {
// ...
})
.end()
具體的函數(shù)：
- /.vue.jsx?$/
- options.transpileDependencies
返回 false
這里的
transpileDependencies是在vue.confg.js中配置的停巷，開發(fā)者可以自行配置
- /node_modules/
- cliServicePath
返回 true
if (/\.vue\.jsx?$/.test(filepath)) {
return false
}
// exclude dynamic entries from cli-service
const cliServicePath = require('path').dirname(require.resolve('@vue/cli-service'))
if (filepath.startsWith(cliServicePath)) {
return true
}
// check if this is something the user explicitly wants to transpile
if (options.transpileDependencies.some(dep => filepath.match(dep))) {
return false
}
// Don't transpile node_modules
return /node_modules/.test(filepath)
3、配置 use
.use('cache-loader')
.loader('cache-loader')
.options()
.end()
4榕栏、根據(jù)條件判斷是否增加 thread-loader
條件如下：用戶在 vue.config.js 中是否配置了 parallel 而且要是 production 環(huán)境
const useThreads = process.env.NODE_ENV === 'production'
&& options.parallel
還是用 .user 和 .loader
if (useThreads) {
jsRule
.use('thread-loader')
.loader('thread-loader')
}
最后追加了一個 babel-loader
jsRule
.use('babel-loader')
.loader('babel-loader')
