最近在梳理以vue-cli3为基础的几个项目的脚手架，发现其中一个项目在打包时通过() => import动态导入的文件不会生成单个chunk文件。 从babel版本, webpack版本， babel插件各个角度都无效，冷静下来分析，一定是babel上的问题，而vue-cli4的babel.config.js中preset使用的是@vue/cli-plugin-babel/preset， 因此顺腾摸瓜去找源码看逻辑，最终找到了关键文件 @vue\babel-preset-app\index.js
如下图
......
// cli-plugin-jest sets this to true because Jest runs without bundling
if (process.env.VUE_CLI_BABEL_TRANSPILE_MODULES) {
envOptions.modules = 'commonjs'
if (process.env.VUE_CLI_BABEL_TARGET_NODE) {
// necessary for dynamic import to work in tests
plugins.push(require('babel-plugin-dynamic-import-node'))
}
}
......脚手架通过全局环境变量VUE_CLI_BABEL_TRANSPILE_MODULES来控制当前js是commonjs还是esmodule， 而设置环境变量一般在.env文件，果然一看，VUE_CLI_BABEL_TRANSPILE_MODULES被设成了true, 导致babel解析时只对commonjs语法生效，() => import属于esmodule不会被解析
VUE_CLI_BABEL_TRANSPILE_MODULES这个变量设置的好处在于，一般在开发环境可以使用，加快热更新的效率
