Utools for Vite
- 自动配置开发环境的地址
- 支持直接打包出插件 upx
- 支持 preload.js 模块化
- 支持 uTools api 模块化
npm i @ver5/vite-plugin-utools -D
在 vite.config.js
中添加配置
import utools from "@ver5/vite-plugin-utools";
export default {
plugins: [
utools({
// plugin.json 路径
configFile: "./utools/plugin.json",
// 不需要打包的库
external: ["electron"],
// preload 相关配置
preload: {
// 热更新
watch: true,
// window上的挂载名,为空则表示直接将导出挂载到window下
name: "preload",
// 是否压缩
minify: false,
},
upx: {
outDir: "dist",
outName: "[pluginName]_[version].upx",
},
}),
],
};
如果你是一个全新的 vite 的项目中可以先运行,那么可以先运行下面的命令:
npx utools
会在当前根目录生成 utools 文件夹和模版文件。当然了你也可以不运行该命令,直接进行参考上面的配置,进行 utools 开发了。
注意
⚠️ :需要在configFile
的plugin.json
文件中指定 preload 入口文件,假如你的preload:'./plugin/index.ts'
表示相对当前plugin.json
所在路径,之后会自动转换。
直接使用 window.electron 即可。(记住:utools 插件只支持部分 electorn 模块功能!)
export const hello = () => window.utools.showNotification("你好👋!")
export const clearClipboard = () => window.electron.clipboard.clear()
假设 preload 入口文件是index.ts
,并且配置了 preload 的name: 'preload'
// index.ts
import { readFileSync } from "fs";
// 所有需要挂载到`window`上的函数或其他,都需要导出使用(记住:只能在入口文件中导出!)
export const hello = () => window.utools.showNotification("你好👋!")
export const clearClipboard = () => window.electron.clipboard.clear()
export const readPlugin = () => readFileSync("./plugin.json");
最终转换为preload.js
:
"use strict";
window['preload'] = Object.create(null);
const { readFileSync } = require("fs");
window['preload'].hello = window.utools.showNotification("你好👋!")
window['preload'].clearClipboard = () => window.electron.clipboard.clear()
window['preload'].readPlugin = () => readFileSync("./plugin.json");
当然了也支持导入其他文件,和第三方 node 模块。
保持preload.js
的简洁。
运行npm run dev
显示示例:
vite v4.1.4 building for utools-build-mode...
✓ 32 modules transformed.
dist/preload.js 2.35 kB
dist/node_modules/lib.js 53.28 kB │ gzip: 12.22 kB
dist/node_modules/auth.js 53.71 kB │ gzip: 13.11 kB
dist/node_modules/@xmldom.js 122.16 kB │ gzip: 30.23 kB
启动项目后,生成的dist
文件夹中就会包括所需的开发文件了,在“uTools 开发者工具”中指向目标目录中的plugin.json
即可!
插件的 plugin.json
文件必须项
以下字段不设置,会自动取package.json
中对应的自动字段,没有的话,则报错!
"name": "demo", // uTools 开发者工具中的项目 id
"pluginName": "demo",
"version": "0.0.1",
"description": "demo",
"author": "chandlerVer5",
"homepage": "https://github.com/chandlerVer5",
"logo": "logo.png",
"features":[]
可将 vite 构建后的产物打包成 uTools 的 upx 离线包
(必须)
默认值:''
插件plugin.json
文件路径
默认值:false
如果当前项目属于 typescript 项目,或者 设置autoType:true
会自动 s生成名为preload.d.ts
的类型文件(相对于configFile
中的preload
路径)。
基本上有两个作用:
- 自动配置 utools api 的类型声明
- 自动配置 electron 的类型声明
- 生成相应的 typescript 类型
如果不生效,请尝试
preload.d.ts
的类型声明添加到tsconfig.json
的include
中,以便生效!
默认值:electron
,electron
总是会被排除掉。
对于不想打包的包,可以先external
排除掉,例如external: ['tiktoken']
,,然后通过 vite-plugin-static-copy 复制到目标目录。
默认值:preload
preload.js
在window
的挂载名
默认值:true
preload.js
修改后重新构建,配合 uTools 开发者工具开启隐藏插件后完全退出
使用
默认值:false
启用文件的压缩
默认值:undefined
返回值:(preloadCode:string) => string(required)
可以通过该函数,修改preload.js
内容。
该函数的返回值会被设置为preload.js
的内容。
默认值: dist
插件打包输出路径
默认值:[pluginName]_[version].upx
插件输出文件名
- 生成 ts 类型
- preload 自动 reload