refactoring

README.md

@@ -153,8 +153,7 @@ npm run build-upload # 或 yarn build-upload
 ├── README.md
 ├── tsconfig.json
 └── vite.config.ts           # 主要的 vite 配置
-└── vite.desktop.config.ts   # 用于打包 desktop 文件的配置
+└── vite.iife.config.ts      # 用于打包 desktop/mobile 文件的配置
-└── vite.mobile.config.ts    # 用于打包 mobile 文件的配置
 ```
 
 

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "vite:build": "vite build",
     "build": "vite build && npm run pkg",
+    "build:prod": "cross-env BUILD_MODE=production vite build && npm run pkg",
     "build-upload": "npm run build && npm run upload",
     "pkg": "kintone-plugin-packer --ppk private.ppk --out dist/plugin.zip dist/src",
     "upload": "kintone-plugin-uploader --base-url https://alicorn.cybozu.com --username maxz --password 7ld7i8vd dist/plugin.zip "
@@ -25,9 +26,11 @@
     "@types/node-rsa": "^1.1.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
+    "cross-env": "^10.1.0",
     "eslint": "^8.57.0",
     "node-rsa": "^1.1.1",
     "rollup-plugin-copy": "^3.5.0",
+    "terser": "^5.44.0",
     "typescript": "^5.7.3",
     "unplugin-vue-components": "^28.0.0",
     "vite": "^6.0.1",

scripts/privateKey.ts

@@ -0,0 +1,12 @@
+'use strict';
+// @ts-ignore
+import RSA from 'node-rsa';
+
+/**
+ * Create a private key for a kintone plugin
+ * Copy from https://github.com/kintone/js-sdk/blob/main/packages/create-plugin/src/privateKey.ts
+ */
+export const generatePrivateKey = () => {
+  const key = new RSA({ b: 1024 });
+  return key.exportKey('pkcs1-private');
+};

tsconfig.json

@@ -6,7 +6,12 @@
     "./node_modules/@kintone/dts-gen/kintone.d.ts",
   ],
   "compilerOptions": {
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "paths": {
       "@/*": ["./src/*"]

vite.config.ts

@@ -5,20 +5,17 @@ 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 RSA from 'node-rsa';
+import { generatePrivateKey } from './scripts/privateKey';
+const packageJson = require('./package.json');
 
 // 从 package.json 读取 kintone-ui-component 版本信息
-const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'package.json'), 'utf-8'));
 const kucVersion = packageJson.dependencies['kintone-ui-component'];
 const formattedVersion = kucVersion.replace(/\./g, '-'); // 例如：1.22.0 -> 1-22-0
 
-/**
+// 判断是否为生产环境构建
- * 生成 kintone 插件的私钥
+const isProd = process.env.BUILD_MODE === 'production';
- */
+const buildMode = isProd ? 'production' : 'development';
-export const generatePrivateKey = () => {
+console.log(`Building IIFE versions in ${buildMode} mode...`);
-  const key = new RSA({ b: 1024 });
-  return key.exportKey('pkcs1-private');
-};
 
 // 检查 private.ppk 是否存在，如果不存在则生成
 const privateKeyPath = path.resolve(__dirname, 'private.ppk');
@@ -82,11 +79,11 @@ function buildIIFEVersions() {
       try {
         // Build desktop IIFE
         console.log('Building desktop IIFE...');
-        child_process.execSync('npx vite build --config vite.desktop.config.ts', { stdio: 'inherit' });
+        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.mobile.config.ts', { stdio: 'inherit' });
+        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) {
@@ -165,7 +162,22 @@ export default defineConfig({
         assetFileNames: 'src/[ext]/[name].[ext]', // 设置资源文件输出路径
       },
     },
-    sourcemap: 'inline', // 生成内联 sourcemap 用于调试
+    sourcemap: isProd ? false : 'inline', // 生产环境关闭 sourcemap，开发环境使用 inline
-    // sourcemap: false
+    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, // 移除注释
+        },
+      },
+    }),
   },
 });

vite.desktop.config.ts

@@ -1,37 +0,0 @@
-import * as path from 'path';
-
-/**
- * 将桌面端 desktop.ts 文件打包为立即执行函数表达式 (IIFE) 格式
- */
-export default {
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'), // 配置 @ 别名指向 src 目录
-    },
-  },
-  define: {
-    'process.env.NODE_ENV': JSON.stringify('production'),
-    'process.env': JSON.stringify({}),
-    global: 'window',
-  },
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/js/desktop.ts'),
-      name: 'DesktopPlugin',
-      formats: ['iife'],
-      fileName: () => 'desktop.js', // 输出文件名，和 manifest.json 中的 name 一致
-    },
-    rollupOptions: {
-      external: ['kintone'], // kintone 是网站提供的 api，需要处理
-      output: {
-        globals: {
-          kintone: 'kintone',
-        },
-      },
-    },
-    emptyOutDir: false, // 不清空输出目录，随后拷贝到 dist 目录中之后自动删除
-    outDir: path.resolve(__dirname, 'dist-iife/desktop'), // 输出到 dist-iife 目录
-    sourcemap: 'inline', // 生成内联 sourcemap 用于调试
-    // sourcemap: false
-  },
-};

vite.iife.config.ts

@@ -0,0 +1,72 @@
+import * as path from 'path';
+import { defineConfig, UserConfig } from 'vite';
+const packageJson = require('./package.json');
+
+/**
+ * 生成 IIFE 配置的工厂函数
+ * @param platform 'desktop' | 'mobile'
+ */
+function createIIFEConfig(platform: 'desktop' | 'mobile'): UserConfig {
+  // 判断是否为生产环境构建
+  const isProd = process.env.BUILD_MODE === 'production';
+
+  return {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src'),
+      },
+    },
+    define: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env': JSON.stringify({}),
+      global: 'window',
+    },
+    build: {
+      lib: {
+        entry: path.resolve(__dirname, `src/js/${platform}.ts`),
+        name: `${packageJson.name.replaceAll('-', '_')}_${platform}_iife`,
+        formats: ['iife'],
+        fileName: () => `${platform}.js`,
+      },
+      rollupOptions: {
+        external: ['kintone'], // kintone 是网站提供的 api，需要处理
+        output: {
+          globals: {
+            kintone: 'kintone',
+          },
+        },
+      },
+      outDir: path.resolve(__dirname, `dist-iife/${platform}`), // 输出到 dist-iife 目录
+      sourcemap: isProd ? false : 'inline', // 生产环境关闭，开发环境使用 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, // 移除注释
+          },
+        },
+      }),
+    },
+  };
+}
+
+// 根据环境变量决定构建哪个平台
+const platform = process.env.PLATFORM as 'desktop' | 'mobile';
+
+if (!platform || !['desktop', 'mobile'].includes(platform)) {
+  throw new Error('Please specify PLATFORM environment variable: desktop or mobile');
+}
+
+/**
+ * 统一的 IIFE 构建配置
+ * 用于将 desktop.ts 和 mobile.ts 打包为 IIFE 格式
+ */
+export default defineConfig(createIIFEConfig(platform));

vite.mobile.config.ts

@@ -1,37 +0,0 @@
-import * as path from 'path';
-
-/**
- * 将移动端 mobile.ts 文件打包为立即执行函数表达式 (IIFE) 格式
- */
-export default {
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'), // 配置 @ 别名指向 src 目录
-    },
-  },
-  define: {
-    'process.env.NODE_ENV': JSON.stringify('production'),
-    'process.env': JSON.stringify({}),
-    global: 'window',
-  },
-  build: {
-    lib: {
-      entry: path.resolve(__dirname, 'src/js/mobile.ts'),
-      name: 'MobilePlugin',
-      formats: ['iife'],
-      fileName: () => 'mobile.js', // 输出文件名，和 manifest.json 中的 name 一致
-    },
-    rollupOptions: {
-      external: ['kintone'], // kintone 是网站提供的 api，需要处理
-      output: {
-        globals: {
-          kintone: 'kintone',
-        },
-      },
-    },
-    emptyOutDir: false, // 不清空输出目录，随后拷贝到 dist 目录中之后自动删除
-    outDir: path.resolve(__dirname, 'dist-iife/mobile'), // 输出到 dist-iife 目录
-    sourcemap: 'inline', // 生成内联 sourcemap 用于调试
-    // sourcemap: false
-  },
-};