如何在ViteJS中使用“`unpkg`”？

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",

但是现在迁移到ViteJS npm run build可以创建带有随机字符串index.25e1eb44.js的js文件。

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

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