时间戳

首页 > 解决方案 > 使用目标 wc 构建选项时，vue-cli 不会将代码转换为 es5 或 commonjs

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

问题描述

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

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

输出的构建 js 仍然有const和 箭头功能。例如，如何将其转换为 commonjs？

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

项目根目录中有一个babel.config.js文件（从 vue-cli 生成）

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

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

标签： vue.jsvuejs2babeljsvue-cli-3

解决方案

默认的 Vue CLI 项目使用@vue/babel-preset-app，它使用 @babel/preset-env和browserslist配置来确定项目所需的 Polyfill。

默认情况下，它会useBuiltIns: 'usage'根据@babel/preset-env源代码中使用的语言功能自动检测所需的 polyfills。这确保了最终包中只包含最少量的 polyfill。但是，这也意味着如果您的依赖项之一对 polyfill 有特定要求，默认情况下 Babel 将无法检测到它。

使用 Vue CLI 构建库或 Web 组件时，建议通过useBuiltIns: falseto@vue/babel-preset-app禁用自动 polyfill 注入。这可以确保您不会在代码中包含不必要的 polyfill，因为使用应用程序应该有责任包含 polyfill。

构建CommonJS使用目标--library：

vue-cli-service build --target lib --name myLib [entry]

构建目标

推荐阅读