vue.js - 使用目标 wc 构建选项时，vue-cli 不会将代码转换为 es5 或 commonjs

Question

我正在尝试使用以下方法构建组件:

vue-cli-service build --target wc --name my-component ./src/App.vue

输出的build js还是有const和箭头函数。例如，我怎样才能将它转换为 commonjs？

我尝试在 babel 配置中使用各种预设，但构建结果仍然相同。

项目根目录下有一个babel.config.js文件(由vue-cli生成)

module.exports = {
  presets: [
  '@vue/app'
  ]
}

没有错误，构建正在进行但没有转译。几乎就像在使用目标 wc 构建时绕过 babel 配置

Answer 1

A default Vue CLI project uses @vue/babel-preset-app, which uses @babel/preset-env and the browserslist config to determine the Polyfills needed for your project.

By default, it passes useBuiltIns: 'usage' to @babel/preset-env which automatically detects the polyfills needed based on the language features used in your source code. This ensures only the minimum amount of polyfills are included in your final bundle. However, this also means if one of your dependencies has specific requirements on polyfills, by default Babel won't be able to detect it.

When using Vue CLI to build a library or Web Components, it is recommended to pass useBuiltIns: false to @vue/babel-preset-app to disable automatic polyfill injection. This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include polyfills.

为 CommonJS 构建使用目标 --library:

vue-cli-service build --target lib --name myLib [入口]

Build Targets