插件应用目录结构

此部分会帮助你了解，通常情况下，一个插件应用的文件目录结构。

插件应用至少要有一个 plugin.json 作为入口，并配置 logo 字段以及 main 或者 preload 字段。

一个相对完整的插件应用目录可能是这样的：

path/to/{plugin}
|-- plugin.json
|-- preload.js
|-- index.html
|-- index.js
|-- index.css
|-- logo.png

源码编译

uTools 仅识别 html + css + javascript, 通常我们在开发过程中可能会使用各种的工具来辅助开发，比如 vite、webpack 等等，也可能会引入各种前端框架，比如 vue、react、svelte 等等，而这些代码并不是直接可以被 uTools 识别的，当我们打包插件应用前应该先将框架代码打包成普通的 html 、css、js 文件。

第三方依赖

当你使用第三方依赖时，根据项目情况进行区分：

当你使用前端依赖时，只需要在项目的根目录下安装即可，对前端项目进行正常的打包。

当你使用 nodejs 的第三方依赖时，应当保证你的模块存在于 preload.js 同级目录，并且不要对它们进行任何打包操作，保证提交插件应用时的目录结构不变，并且源码清晰可读。

资源文件

在使用 vite 或者 webpack 打包项目时，默认会将 public 目录下的文件直接复制到插件目录下，所以你可以直接将 logo.png 、plugin.json 等文件放在 public 目录下即可。

基于此，第三方依赖也可以放在 public 目录下，但是需要确保插件应用目录下不会出现同名文件，造成资源冲突。

打包为插件应用安装包

插件应用进行打包时选择的 plugin.json 所在的目录将会被全部打包到插件应用安装包中，因此你需要保证此目录下仅包含插件应用所需要的文件。

关于插件应用打包时，请查看文件资源清洁的 FQA 部分。