princess-ui/packages/build/buildComponent.ts

import { build } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
import dts from "vite-plugin-dts"
import { replaceCodePlugin } from "vite-plugin-replace";
// import libInjectCss from "./libInjectCss"
import _ from "lodash"
import { getOutput, getPath, getPkgs } from "@princess-ui/share";

export default function (prefix: string, component: string, name: string, opts?: {}) {
    return build({
        logLevel: "error",
        plugins: [
            vue({ isProduction: true }),
            dts({
                entryRoot: `components/${component}`,
                tsConfigFilePath: getPath("tsconfig.json"),
                outputDir: getOutput(`lib/${component}`),
                cleanVueFileName: true,
                include: [`components/${component}/index.vue`],
                staticImport: true,
            }),
            replaceCodePlugin({
                replacements: [
                    {
                        from: "@princess-ui/components",
                        to: "princess-ui/lib",
                    },
                ],
            }),
            // libInjectCss(),
        ],
        build: {
            outDir: getOutput("lib"),
            cssCodeSplit: false,
            emptyOutDir: false,
            lib: {
                entry: path.resolve(__dirname, `../components/${component}/index.ts`),
                name: name,
                formats: ["es", "umd"],
                fileName: format => `${component}/index${format == 'es' ? '' : '.umd'}.js`,
            },
            rollupOptions: {
                external: id => {
                    if (/^vue/.test(id)) {
                        return true
                    }
                    if (/^princess-ui/.test(id)) {
                        return true
                    }
                    return false
                },
                output: [
                    {
                        format: "es",
                        assetFileNames(chunkInfo) {
                            if (chunkInfo.name == "style.css") {
                                return `${component}/style.css`
                            }
                        },
                    },
                    {
                        exports: "named",
                        name: name,
                        format: "umd",
                        globals: (id: string) => {
                            if (/^vue/.test(id)) {
                                return "Vue"
                            }
                            if (new RegExp(/^princess-ui/).test(id)) {
                                let str = id.replace(/^princess\-ui\/lib\//, prefix)
                                str = str.slice(0, 2) + str.slice(2)[0].toUpperCase() + str.slice(3)
                                return str
                            }
                        },
                    },
                ],
            },
        },
    })
}