文件目录结构

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

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

一个相对完整的插件可能是这样的：

不使用打包工具

path/to/{plugin}
|-- src-utools/
|   |-- preload.js
|   |-- node_modules/
|   |-- logo.png
|-- src/
|   |-- index.js
|-- index.html
|-- plugin.json
|-- package.json

使用 vite

path/to/{plugin}
|-- node_modules/
|-- src/
|-- public/
|   |-- .utools/
|   |   |-- preload.js
|   |   |-- node_modules/
|   |   |-- package.json
|   |-- logo.png
|   |-- plugin.json
|-- index.html
|-- vite.config.js
|-- package.json

使用 webpack

path/to/{plugin}
|-- node_modules/
|-- src/
|-- public/
|   |-- .utools/
|   |   |-- preload.js
|   |   |-- node_modules/
|   |   |-- package.json
|   |-- logo.png
|   |-- plugin.json
|   |-- index.html
|-- webpack.config.js

源代码

在 utools 的插件项目中，源代码可以被分为两部分：

一部分是 utools 插件基座识别的代码，包含 plugin.json 、 preload.js 以及 LOGO。

另一部分则是前端渲染的代码，这部分代码其实也属于 utools 插件基座的一部分，当你使用原生 html + js 的方式来开发插件，这部分代码并不需要被特别区分，直接与 utools 插件基座的代码一起打包就可以。

但是通常我们在开发过程中可能会使用各种的工具来辅助开发，比如 vite、webpack 等等，也可能会引入各种前端框架，比如 vue、react、svelte 等等，而这些代码并不是直接可以被 utools 识别的，当我们打包插件前应该先将框架代码打包成普通的 html 、js 以及 css 文件，然后通过 preload.json 的 main 字段加载。

第三方依赖

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

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

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

资源文件

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

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

插件打包

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

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