update

vite.config.ts

@@ -1,10 +1,32 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import copy from "rollup-plugin-copy";
+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',
@@ -12,24 +34,28 @@ function replaceKucTagsPlugin() {
       if (id.endsWith('.vue')) {
         const content = await fs.promises.readFile(id, 'utf-8');
 
-        const usedComponent = {}
+        const usedComponent = {};
 
+        // 替换 <kuc-*> 为带有版本号的形式 <kuc-[version]-*>
         let res = content
-          .replace(/<\/kuc-([a-zA-Z0-9-]+)(?![0-9-])>/g, (match, p1) => `</kuc-${p1}-1-18-0>`)
-          .replace(/<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>/g, (match, p1, p2) => {
+          .replace(new RegExp(`</kuc-([a-zA-Z0-9-]+)(?![0-9-])>`, 'g'), (match, p1) => `</kuc-${p1}-${formattedVersion}>`)
+          .replace(new RegExp(`<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>`, 'g'), (match, p1, p2) => {
             usedComponent[p1] = true;
-            return `<kuc-${p1}-1-18-0${p2}>`
+            return `<kuc-${p1}-${formattedVersion}${p2}>`;
           });
+
+        // 如果有 KUC 组件，自动生成 import 脚本
         if (Object.keys(usedComponent).length) {
-          let importScript = '<script lang="ts">'
+          let importScript = '<script lang="ts">';
           Object.keys(usedComponent).forEach((key) => {
             const keyPascal = key.split('-')
-              .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+              .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
               .join('');
+            // 特殊处理 multi-choice 组件名称
             if (key === 'multi-choice') {
               key = 'multichoice';
             }
-            importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";`
+            importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";`;
           });
           importScript += '</script>';
           res = importScript + res;
@@ -37,52 +63,121 @@ function replaceKucTagsPlugin() {
 
         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: {
-          isCustomElement: (tag) => tag.startsWith("kuc-"),
-        }
-      }
+          // 将以 kuc- 开头的标签识别为自定义元素，避免 Vue 的警告
+          isCustomElement: (tag) => tag.startsWith('kuc-'),
+        },
+      },
     }),
-    Components(),
+    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()
+    replaceKucTagsPlugin(), // 自定义标签替换插件
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, 'src'),
+      '@': path.resolve(__dirname, 'src'), // 配置 @ 别名指向 src 目录
     },
   },
   build: {
     rollupOptions: {
       input: {
         config: path.resolve(__dirname, 'index.html'),
-        desktop: path.resolve(__dirname, 'src/js/desktop.ts'),
-        mobile: path.resolve(__dirname, 'src/js/mobile.ts'),
       },
       output: {
         entryFileNames: (chunkInfo) => {
-           return 'src/js/[name].js'; // 默认处理为 JS 文件
+          return 'src/js/[name].js'; // 将入口文件输出为 JS 文件
         },
-        assetFileNames: 'src/[ext]/[name].[ext]',
+        assetFileNames: 'src/[ext]/[name].[ext]', // 设置资源文件输出路径
       },
     },
-    sourcemap: 'inline',
-  }
-})
+    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, // 移除注释
+        },
+      },
+    }),
+  },
+});