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", "你好"]}]
}
2.4 加载应用
可以通过项目中的按键选择plugin.json文件，也可以通过直接拖拽的方式选择这个文件。完成选择后，utools会自动加载配置信息，页面会自动显示logo。然后打开插件隐藏后完全推出选项，点击开始运行。
2.5 测试插件
通过alt+空格呼出utools，键入刚才设置的react关键字调用我们的插件，发现插件成功加载了。
然后选择react插件，进入后，成功预览到React页面：
参考资料
[1] https://u.tools/docs/developer/welcome.html utools插件开发
[2] https://create-react-app.dev Create React App
