⚠️ Vue CLI 处于维护模式!

对于新项目,现在建议使用 create-vue 来搭建基于 Vite 的项目。还可以参考 Vue 3 工具指南 获取最新建议。

@vue/cli-plugin-babel

vue-cli 的 babel 插件

配置

默认情况下使用 Babel 7 + babel-loader + @vue/babel-preset-app,但可以通过 babel.config.js 配置使用任何其他 Babel 预设或插件。

默认情况下,babel-loader 排除 node_modules 依赖项中的文件。如果您希望显式地转译依赖项模块,则需要将其添加到 vue.config.js 中的 transpileDependencies 选项中。

module.exports = {
  transpileDependencies: [
    // can be string or regex
    'my-dep',
    /other-dep/
  ]
}

缓存

babel-loader 的缓存选项默认情况下已启用,缓存存储在 <projectRoot>/node_modules/.cache/babel-loader 中。

并行化

当机器拥有超过 1 个 CPU 内核时,默认情况下会启用 thread-loader。可以通过在 vue.config.js 中设置 parallel: false 来关闭它。

当将 Babel 与不可序列化加载器选项(例如正则表达式、日期和函数)结合使用时,应将 parallel 设置为 false。这些选项不会正确传递给 babel-loader,这可能会导致意外错误。

在已创建的项目中安装

vue add babel

注入的 webpack-chain 规则

  • config.rule('js')
  • config.rule('js').use('babel-loader')