import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import copy from 'rollup-plugin-copy'; import * as path from 'path'; import * as fs from 'fs'; import * as child_process from 'child_process'; import Components from 'unplugin-vue-components/vite'; import { generatePrivateKey } from './scripts/privateKey'; const packageJson = require('./package.json'); // 从 package.json 读取 kintone-ui-component 版本信息 const kucVersion = packageJson.dependencies['kintone-ui-component']; const formattedVersion = kucVersion.replace(/\./g, '-'); // 例如:1.22.0 -> 1-22-0 // 判断是否为生产环境构建 const isProd = process.env.BUILD_MODE === 'production'; const buildMode = isProd ? 'production' : 'development'; console.log(`Building IIFE versions in ${buildMode} mode...`); // 检查 private.ppk 是否存在,如果不存在则生成 const privateKeyPath = path.resolve(__dirname, 'private.ppk'); if (!fs.existsSync(privateKeyPath)) { const privateKey = generatePrivateKey(); fs.writeFileSync(privateKeyPath, privateKey); } /** * 自定义插件 vite-plugin-replace-tags:替换 KUC 组件标签为包含版本号的标签,并自动导入组件 */ function replaceKucTagsPlugin() { return { name: 'vite-plugin-replace-tags', async load(id) { if (id.endsWith('.vue')) { const content = await fs.promises.readFile(id, 'utf-8'); const usedComponent = {}; // 替换 为带有版本号的形式 let res = content .replace(new RegExp(``, 'g'), (match, p1) => ``) .replace(new RegExp(`]*)>`, 'g'), (match, p1, p2) => { usedComponent[p1] = true; return ``; }); // 如果有 KUC 组件,自动生成 import 脚本 if (Object.keys(usedComponent).length) { let importScript = ''; res = importScript + res; } return res; } }, }; } /** * 自定义插件 iife-builder:构建 desktop.ts 和 mobile.ts 的 IIFE 版本 */ function buildIIFEVersions() { return { name: 'iife-builder', buildStart() { console.log('Building IIFE versions...'); try { // Build desktop IIFE console.log('Building desktop IIFE...'); child_process.execSync('npx vite build --config vite.iife.config.ts', { stdio: 'inherit', env: { ...process.env, PLATFORM: 'desktop' } }); // Build mobile IIFE console.log('Building mobile IIFE...'); child_process.execSync('npx vite build --config vite.iife.config.ts', { stdio: 'inherit', env: { ...process.env, PLATFORM: 'mobile' } }); console.log('IIFE builds completed successfully.'); } catch (error) { console.error('Error building IIFE versions:', error); throw error; } }, generateBundle(options, bundle) { // 将 IIFE 版本复制到主构建目录覆盖原有文件 const desktopIIFEPath = path.resolve(__dirname, 'dist-iife/desktop/desktop.js'); const mobileIIFEPath = path.resolve(__dirname, 'dist-iife/mobile/mobile.js'); const destDir = path.resolve(__dirname, 'dist/src/js'); if (fs.existsSync(desktopIIFEPath)) { fs.mkdirSync(destDir, { recursive: true }); fs.copyFileSync(desktopIIFEPath, path.join(destDir, 'desktop.js')); console.log('Copied desktop.js to dist/src/js/'); } if (fs.existsSync(mobileIIFEPath)) { fs.mkdirSync(destDir, { recursive: true }); fs.copyFileSync(mobileIIFEPath, path.join(destDir, 'mobile.js')); console.log('Copied mobile.js to dist/src/js/'); } // 清理临时的 dist-iife 目录 if (fs.existsSync(path.resolve(__dirname, 'dist-iife'))) { fs.rmSync(path.resolve(__dirname, 'dist-iife'), { recursive: true, force: true }); console.log('Cleaned up dist-iife directory'); } }, }; } // https://vite.dev/config/ export default defineConfig({ plugins: [ buildIIFEVersions(), vue({ template: { compilerOptions: { // 将以 kuc- 开头的标签识别为自定义元素,避免 Vue 的警告 isCustomElement: (tag) => tag.startsWith('kuc-'), }, }, }), Components(), // 自动导入 Vue 组件 copy({ // 将打包 plugin 需要的文件复制到 dist 里面 targets: [ { src: 'dist/index.html', dest: 'dist/src/html', rename: 'config.html' }, { src: 'src/manifest.json', dest: 'dist/src' }, { src: 'src/assets/*.js', dest: 'dist/src/js' }, { src: 'src/assets/*.png', dest: 'dist/src/image' }, { src: 'src/css/*', dest: 'dist/src/css' }, // { src: 'node_modules/kintone-ui-component/umd/kuc.min.js', dest: 'dist/src/js' }, ], hook: 'writeBundle' // 指定在何时复制文件 }), replaceKucTagsPlugin(), // 自定义标签替换插件 ], resolve: { alias: { '@': path.resolve(__dirname, 'src'), // 配置 @ 别名指向 src 目录 }, }, build: { rollupOptions: { input: { config: path.resolve(__dirname, 'index.html'), }, output: { entryFileNames: (chunkInfo) => { return 'src/js/[name].js'; // 将入口文件输出为 JS 文件 }, assetFileNames: 'src/[ext]/[name].[ext]', // 设置资源文件输出路径 }, }, sourcemap: isProd ? false : 'inline', // 生产环境关闭 sourcemap,开发环境使用 inline minify: isProd ? 'terser' : false, // 生产环境使用 terser 混淆,开发环境不混淆 ...(isProd && { terserOptions: { compress: { drop_console: true, // 移除 console drop_debugger: true, // 移除 debugger pure_funcs: ['console.log'], // 移除 console.log }, mangle: { toplevel: true, // 混淆顶级作用域的变量名 }, format: { comments: false, // 移除注释 }, }, }), }, });