Vue / Vite v3.2.5 - 选项 "output.format" 的值"umd"无效

Question

我使用Vite v3.2.5 ve2，当我运行npm run build时，我得到这个错误:无效值"umd"对于选项"output.format"-代码分割构建不支持UMD和IIFE输出格式。

这是我的vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue2';
const path = require('path')
import { resolve } from 'path'
export default defineConfig({
plugins: [
laravel({
hotFile: 'public/widget.hot',
input: [
'resources/js/app.js',
'resources/scss/app.scss',
'resources/scss/index.scss'
],
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm.js',
},
dedupe: [
'vue'
]
},
alias: {
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
},
build: {
cssCodeSplit: true,
lib: {
input: {
app: "./resources/js/app.js"
},
entry: resolve(__dirname, 'resources/js/app.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
name: 'bundle',
fileName: 'app'
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
format: "esm",
inlineDynamicImports: false,
},
},
},
});

有谁知道这里有什么问题吗?我的输出。格式值为"esm"而不是"umd"?！谢谢你的帮助!

Answer 1

当指定lib选项时，看起来Vite默认生成es和umd包:

使用此配置运行vite构建使用Rollup预设，该预设面向发布库，并产生两种包格式:es和umd(可通过build.lib配置):

(来自https://vitejs.dev/guide/build.html library-mode)

要改变这一点，您必须在build.lib中添加一个显式的formats选项:

lib: {
input: {
app: "./resources/js/app.js"
},
formats: ['es'],
entry: resolve(__dirname, 'resources/js/app.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
name: 'bundle',
fileName: 'app'
},