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

Posted 2023-02-23

【中文标题】如何在 vue cli3 中将排除与 babel-loader 一起使用？

【英文标题】：how to use exclude with babel-loader in vue cli3?

【发布时间】：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

【参考方案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')

它有效。