How do I use `unpkg` with ViteJS?

Question

I'm migrating my Vue plugin from Vue CLI to Vitejs.

With vue-cli-service build I generate three files: index.common.js, index.umd.js and index.umd.min.js

In package.json I refer to these files with:

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

But now migrating to ViteJS npm run build creates js files with random strings index.25e1eb44.js.

How do I use unpkg with ViteJS in package.json?

Answer 1

By reading other code, I found a good solution:

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(),
    ],
});

For more, read here: https://vitejs.dev/config/build-options.html#build-commonjsoptions