utools插件开发快速入门--以React应用为例

锦诚明

已于 2022-03-24 00:13:29 修改

阅读量4.1k

点赞数

分类专栏： React 文章标签： React utools 插件

于 2022-03-24 00:12:26 首次发布

本文链接：https://blog.csdn.net/qq_40977710/article/details/123700077

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

utools是新一代效率工具平台，它聚焦搜索，默认通过alt+空格就可以呼出搜索框，统一功能入口。它是一个插件平台，通过安装各种独特功能的插件，强大自己的功能，变成一个自定义的工具集，可以往输入框输入文字、图片、文件、文件夹等，使utools功能不仅仅局限于文件、文件夹名称的快速搜索。

utools简洁美观、即用即走、无中断、不干扰等特点，我非常喜欢，有时自己兴起一些想法，想通过utools来搞定，但是没有找到合适的插件实现，有点小失望。但是，有能力的同学就可以试试自己做个自己的插件，甚至精雕细琢制作一个小应用，顺便发布到插件市场上，造福大家哈哈。

本文将以React应用开发为例，介绍utools插件开发流程，带大家入门utools插件开发。

utools官方开发文档：https://u.tools/docs/developer/welcome.html

一、搭建React脚手架

1.1 创建一个应用

在你开发的环境中， Node 版本需要大于（包括）14

create-react-app是创建单页React应用程序的一种官方支持的方式，它提供了一个现代构建设置，没有配置。

可以通过以下方式创建，区别就是包管理工具不同：

npx

npx create-react-app my-app

npx随 NPM5.2及更高版本一起发布

npm

npm init react-app my-app

npm init <initializer> 在 NPM 6以上版本才支持

Yarn

yarn create react-app my-app

yarn create 在Yarn 0.25以上版本才支持

在以上的方式中，可以用你自定义的文件夹名称代替其中的my-app代码。运行创建工程命令后，会在当前目录创建一个叫做my-app的文件夹。在这个目录里面，它会生成初始化工程结构和相关依赖，如下所示：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

这里没有具体配置或者复杂的文件夹结构，只有你构建工程必要的文件，一旦安装完成，你可以打开工程文件夹：

cd my-app

1.2 运行项目

npm start

通过这个命令将应用以开发模式运行，默认以3000端口启动，在浏览器中打开 http://localhost:3000 就能看到初始页面了。

运行项目

1.3 编译项目

React的源文件未经过编译，浏览器是不能解析的，同样，utools也不能解析。如果工程项目需要发布，则可以通过以下命令编译

npm run build

或者

yarn build

编译出来的文件将会放置在build文件夹中。它以生产模式正确地将React捆绑其中，并优化了构建以获得最佳性能。

这里需要注意的是，生产环境的编译之前，需要设置项目的首页地址。这里我们才刚刚创建的应用，只需在package.json文件中增加 "homepage": "." 的选项，编译出来就可以静态打开HTML文件了。

二、搭建utools插件配置

2.1 下载开发者中心插件

在utools的插件市场中获取开发者中心这款插件，方便后续我们的开发过程。

2.2 新增插件项目

在utools进入开发者中心，新增项目，按照提示填写相关信息。此时的项目是个预设项目，需要通过一个配置文件找到应用目录，才能执行后续运行。

2.3 plugin.json

在my-app应用目录下，创建plugin.json配置文件，这是最重要的一个文件，用来说明这个插件将如何与 uTools 集成，最简单必要的配置信息如下：

{
	"main": "index.html",
	"logo": "logo.png",
	"features": [
		{
		  "code": "hello",
		  "explain": "hello world",
			"cmds":["hello", "你好"]
		}
	]
}

字段说明

main : 入口文件，如果没有定义入口文件，此插件将变成一个模版插件

logo : 插件的图标

features : 唯一比较复杂的就是 features 了，首先它是一个数组，每个数组元素用来描述这个插件提供的一个相对独立的功能，例如uTools中的「编码小助手」插件，提供了md5 、 时间戳 、 随机数 等功能。

features.code : 插件某个功能的识别码，在进入插件时会传递给你的代码，可用于区分不同的功能，显示不同的 UI

features.cmds : 通过哪些方式可以进入这个功能，中文会自动支持 拼音及拼音首字母，无须重复添加

根据刚才的React应用，编译之后，我们对utools的插件配置稍作修改：

{
	"main": "./build/index.html",
	"logo": "./build/logo192.png",
	"features": [
		{
		  "code": "react",
		  "explain": "hello world",
			"cmds":["react", "你好"]
		}
	]
}