Vite 单JS文件批量打包-祥拓软件

文件目录如下：

lib下的目录是要打包成单个js的源文件

更改package.json

{
  "name": "xt-plugin-auth",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "type": "module",
  "scripts": {
    "build-plugin": "node ./build/build.js"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^25.0.7",
    "@vitejs/plugin-vue": "^5.0.4",
    "typescript": "^5.2.2",
    "vite": "^5.2.8",
    "vue": "^3.4.21"
  }
}

更改vite.config.ts

import {defineConfig} from "vite";

export default defineConfig({
    plugins: [require('./build/plugin-build.js')],
})

新建目录 build，在此目录下创建文件 build.js、plugin-build.js

build.js文件内容

import pluginBuild from "./plugin-build.js";
import { readdirSync, statSync } from 'fs';
import { join } from "path";

const getAllDirectories = (path) => {
    const items = readdirSync(path);
    const directories = [];
    items.forEach((item) => {
        const itemPath = join(path, item);
        const stat = statSync(itemPath);

        if (stat.isDirectory()) {
            directories.push(item);
        }
    });
    return directories;
};

const libList = getAllDirectories(join(process.cwd(), 'lib'))

async function init(){
    for (let i = 0; i < libList.length; i++) {
        await pluginBuild(libList[i])
    }
    process.exit();
}

init()

plugin-build.js 文件内容

import vuePlugin from '@vitejs/plugin-vue'
import commonjs from '@rollup/plugin-commonjs';
import {build} from "vite";
import fs from 'fs';
import {join} from "path";


export default async function pluginBuild (pluginName) {
    await build({
        base: './',
        build: {
            minify: true,
            cssCodeSplit: true,
            outDir: `dist/${pluginName}`,
            lib: {
                formats: ['umd'],
                entry: `./lib/${pluginName}/index.ts`,
                name: pluginName,
                fileName: () => `${pluginName}.js`
            },
            rollupOptions: {
                external: ['vue'],
                output: {
                    globals: {
                        vue: 'pluginVue',
                    }
                }
            },
        },
        plugins: [
            commonjs(),
            vuePlugin(),
        ]
    })
    const savePath = join(process.cwd(), 'dist', `${pluginName}.js`)
    const directoryPath = join(process.cwd(), 'dist', pluginName)
    const filePath = join(process.cwd(), 'dist', pluginName, `${pluginName}.js`)
    fs.renameSync(filePath, savePath)
    console.log('delete plugin temp path: ' + directoryPath)
    fs.rmdirSync(directoryPath);
}

1 本站部分内容资源来源于网络公开资源，如有侵害了您的权益，请发送邮件至 work@work100.com.cn 提供相应的资料，我们将删除对应的资源或内容。
2 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
3 本站一律禁止以任何方式发布或转载任何违法的相关信息，如有发现请发送邮件至 work@work100.com.cn 进行举报
4 本站所有原创内容采用知识共享署名4.0国际许可协议进行许可,勿将我们的作品擅自更改、去除署名。《著作权法》亦规定署名权是不可转让的。
5 以上条款内容最终解释权归本站所有

THE END

Vue