@ver5/vite-plugin-utools NPM

@ver5/vite-plugin-utools

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 开发了。

指定生成的文件夹名

npx utools --dir utools-dir-name

preload 文件支持 ts 和 npm 库

注意 ⚠️：需要在configFile的plugin.json文件中指定 preload 入口文件，假如你的preload:'./plugin/index.ts'表示相对当前plugin.json所在路径，之后会自动转换。

默认支持部分可用 electron 模块

直接使用 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 第三方 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即可！

upx 打包

插件的 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 离线包