[Vue CLI 3] 外掛解析之 @vue/cli-plugin-b

本文我們來看一下官方的這個 @vue/cli-plugin-babel

先看一下原始碼檔案：

generator.jsindex.js

核心的有 2 個檔案，我們主要第一個 index.js，最外層結構多是外掛式的標準結構：

module.exports = (api, options) => {  // ...}

這裡因為我們要擴充套件 webpack 的配置，所以使用了：api.chainWebpack

api.chainWebpack(webpackConfig => {  // ...})

我們先執行 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()

具體的函式：

• /.vue.jsx?$/

• options.transpileDependencies

返回 false

這裡的 transpileDependencies 是在 vue.confg.js 中配置的，開發者可以自行配置

• /node_modules/

• cliServicePath

返回 true

if (/.vue.jsx?$/.test(filepath)) {  return false}// exclude dynamic entries from cli-serviceconst 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 transpileif (options.transpileDependencies.some(dep => filepath.match(dep))) {  return false}// Don't transpile node_modulesreturn /node_modules/.test(filepath)

3、配置 use

.use('cache-loader')
  .loader('cache-loader')
  .options()
  .end()

4、根據條件判斷是否增加 thread-loader

條件如下：使用者在 vue.config.js 中是否配置了 parallel 而且要是 production 環境

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')

作者：dailyvuejs
連結：