脚本宝典收集整理的这篇文章主要介绍了[Vue CLI 3] 插件解析之 @vue/cli-plugin-babel，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文我们来看一下官方的这个 @vue/cli-plugin-babel

先看一下源码文件：

generator.js
index.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-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、根据条件判断是否增加 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')

脚本宝典总结

以上是脚本宝典为你收集整理的[Vue CLI 3] 插件解析之 @vue/cli-plugin-babel全部内容，希望文章能够帮你解决[Vue CLI 3] 插件解析之 @vue/cli-plugin-babel所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。