如何在 vue cli3 中将排除与 babel-loader 一起使用？答案

【问题标题】：how to use exclude with babel-loader in vue cli3?如何在 vue cli3 中将排除与 babel-loader 一起使用？
【发布时间】：2019-07-30 01:52:38
【问题描述】：

我想使用 exclude 来忽略某些不编译的目录，但在 Vue Cli3 中，它不起作用。我的选择是：

chainWebpack: config => {
  config.module
    .rule('js')
    .test(/\.jsx?$/)
    .use('babel-loader')
    .loader('babel-loader')
    .exclude
    .add(resolve('src/libs/iview'))  // this line not work
    .end();
  }

错误：

 TypeError: Cannot read property 'add' of undefined

【问题讨论】：

标签： vue.js babeljs vue-cli vue-cli-3 babel-loader

【解决方案1】：

要从 Babel 转译中排除文件，您可以使用 js babel-loader 的 excludes 选项。下面是一个例子。

注意事项：

字符串必须是绝对路径（如果需要，使用 path.resolve）
正则表达式有效
函数工作

// const path = require('path') // somewhere at the top of the file...
chainWebpack: config => {
  config.module
    .rule('js')
      .exclude
      .add(/path\/to\/folder\/.+\.ignore/) // Regexp: ignore anything inside of path/to/folder that has .ignore in the file extension
//    .add(path.resolve('./path/to/the/folder')) // example with a nix folder
//    .add('C:\\path\\to\\the\\folder\\') // absolute path, example with a Windows folder
    .end()
}

vue inspect module.rules 命令将返回：

[...]
/* config.module.rule('js') */
  {
    test: /\.m?jsx?$/,
    exclude: [
      function () { /* omitted long function */ },
      'C:\\path\\to\\the\\folder\\'
    ],
    use: [
      /* config.module.rule('js').use('cache-loader') */
      {
        loader: 'cache-loader',
        options: {
          cacheDirectory: '[...]\\node_modules\\.cache\\babel-loader',
          cacheIdentifier: '2e75750d'
        }
      },
      /* config.module.rule('js').use('babel-loader') */
      {
        loader: 'babel-loader'
      }
    ]
  }

【讨论】：

【解决方案2】：

删除这个：

.use('babel-loader')
.loader('babel-loader')

它有效。

【讨论】：