如何在ViteJS中使用"unpack"

Question

我正在将Vue插件从Vue CLI迁移到Vitejs。

使用vue-cli-service build，我生成三个文件：index.common.js, index.umd.js and index.umd.min.js

在package.json中，我用引用这些文件

"main": "dist/index.common.js",
"unpkg": "dist/index.umd.min.js",

但现在迁移到ViteJSnpm run build会创建带有随机字符串index.25e1eb44.js的js文件。

如何在package.json中将unpkg与ViteJS一起使用？

Answer 1

通过阅读其他代码，我找到了一个很好的解决方案：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
const path = require('path');
// https://vitejs.dev/config/
export default defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.js'),
name: 'VueResponsiveVideoBackgroundPlayer',
fileName: 'vue-responsive-video-background-player',
},
rollupOptions: {
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// Add external deps here
globals: {
vue: 'Vue',
},
},
},
},
plugins: [
vue(),
cssInjectedByJsPlugin(),
],
});

欲了解更多信息，请阅读此处：https://vitejs.dev/config/build-options.html#build-commonjsoptions