diff --git a/README.md b/README.md index 89b5c09..a8e9678 100644 --- a/README.md +++ b/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.mobile.config.ts # 用于打包 mobile 文件的配置 +└── vite.iife.config.ts # 用于打包 desktop/mobile 文件的配置 ``` diff --git a/package.json b/package.json index 8981220..feb4ca9 100644 --- a/package.json +++ b/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", diff --git a/scripts/privateKey.ts b/scripts/privateKey.ts new file mode 100644 index 0000000..7579dd0 --- /dev/null +++ b/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'); +}; diff --git a/tsconfig.json b/tsconfig.json index 87293ab..33eb195 100644 --- a/tsconfig.json +++ b/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/*"] diff --git a/vite.config.ts b/vite.config.ts index 17a6302..dbb97b4 100644 --- a/vite.config.ts +++ b/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 插件的私钥 - */ -export const generatePrivateKey = () => { - const key = new RSA({ b: 1024 }); - return key.exportKey('pkcs1-private'); -}; +// 判断是否为生产环境构建 +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'); @@ -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: false + 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, // 移除注释 + }, + }, + }), }, }); diff --git a/vite.desktop.config.ts b/vite.desktop.config.ts deleted file mode 100644 index 9cd4e85..0000000 --- a/vite.desktop.config.ts +++ /dev/null @@ -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 - }, -}; diff --git a/vite.iife.config.ts b/vite.iife.config.ts new file mode 100644 index 0000000..ba04c7d --- /dev/null +++ b/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)); \ No newline at end of file diff --git a/vite.mobile.config.ts b/vite.mobile.config.ts deleted file mode 100644 index aefd77b..0000000 --- a/vite.mobile.config.ts +++ /dev/null @@ -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 - }, -};