01

在Vue CLI项目中，配置 VUE_CLI_BABEL_TRANSPILE_MODULES为 true意味着你希望Babel能够转换项目的 node_modules中的模块代码，这对于那些未编译为目标环境的ES6+模块语法的第三方库是非常有用的。然而，这样做也可能引起一些意料之外的问题，特别是在处理异步组件时。

异步组件通常是动态导入的，它们依赖于Webpack的代码分割功能和Babel对于import()语法的支持。当开启了对 node_modules的转译后，可能会导致某些库的内部模块结构被破坏，特别是那些已经优化过的、使用了原生ES模块语法的库。

如果你遇到异步组件打包出错的情况，原因可能是：

Babel转换过程中破坏了异步导入的语法结构。
对不需要转译的模块进行了转译，造成了一些原本正常工作的模块失效或无法识别。

解决办法：

检查：首先，确定出现问题的异步组件及其依赖库是否真的需要通过Babel进行转译。如果是标准的ES6模块并且目标环境支持这些模块特性，则不应该对其进行转译。

排除：在 .babelrc或 babel.config.js中，你可以通过正则表达式或具体模块名来排除不需要转译的模块。例如，在Vue CLI 3及更高版本中，可以在 vue.config.js中配置 transpileDependencies数组来指定需要转译的npm包列表：

javascript

Javascript1module.exports = {
2  chainWebpack: config => {
3    config.module
4      .rule('compile')
5      .test(/\.js$/)
6      .include
7        .add(/node_modules/)
8        .end()
9      .use('babel-loader')
10        .loader('babel-loader')
11        .tap(options => {
12          // 修改它的选项...
13          return options;
14        })
15      .end()
16      .exclude.add(/node_modules\/(?!packageA|packageB)/) // 排除除了packageA和packageB之外的所有node_modules目录
17  },
18  transpileDependencies: ['packageA', 'packageB'], // 需要转译的特定npm包
19};

上述配置中，transpileDependencies仅包含需要转译的特定npm包，而 chainWebpack中的正则表达式则是用来排除大部分 node_modules但包含特定模块。

降级：如果你确定某个库因为转译问题而出错，考虑降级到一个与项目构建环境兼容的版本，或者查找是否有预编译为CommonJS或其他旧版模块格式的版本可用。
修复：若错误确实是由Babel转换引起的，检查转换后的代码以找出具体的错误原因，并相应地调整Babel的配置或寻找替代解决方案。

总之，在配置Vue CLI项目时，务必谨慎对待对 node_modules的转译操作，确保只对确实需要转换的模块进行处理。

01 ​

01