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, // 移除注释
},
},
}),
},
});