# 在前端项目中集成自定义工具类
在前端项目开发中，工具类（utils）是封装通用化、低耦合功能的核心模块，可高效集成第三方npm包或自定义专用函数（如设备数据解析、工艺参数格式化等），大幅提升开发效率与代码复用性。
本文将结合工业场景需求，详细指导您在UI引擎中创建工具类的具体流程。
#### 前提条件
已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
#### 新建工具类
1. 在页面设计器的左侧插件功能区，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532793571.png)，展开"资源管理"面板。
2. 单击上方的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532793889.png)，展开"添加工具类"页面。
3. 在展开的"添加工具类"页面，设置如下信息，单击"保存"。 
   表1添加工具类配置信息 
   | 参数名称           | 参数说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
   |:---|:---|
   | 工具类型           | 选择工具的类型。 - npm：适用于集成第三方包（如数据可视化、工控协议解析包）。  - function：适用于自定义函数（如设备状态转换、工艺数据计算）。                                                                                                     |
   | 工具名称           | 在"页面JS"中调用该工具类的唯一标识名称。 **请注意：工具名称在保存后无法修改，如需调整，请删除后重新添加。**                                                                                                                                                                                                                                                                                                                                                                   |
   | npm包名          | 仅当"工具类型"为"npm"时，需要配置。 为npm官网（npmjs.com）可查询的工具包名称，如"@opentiny/vue"。                                                                                                                                                                                                                                                                                                                                                          |
   | npm包名导出名       | 当"工具类型"为"npm"时，需要配置。 为npm包中具体模块的导出名称。 如果仅使用包中部分模块，需与包的导出名称一致（如"@opentiny/vue"中的"TinyChart"模块）。                                                                                                                                                                                                                                                                               |
   | 解构npm包         | 当"工具类型"为"npm"时，需要配置。 用于控制是否解构npm包，默认勾选此配置项。 如果工具包为"默认导出"，则取消勾选。如果工具包为"非默认导出"，则保持勾选。                                                                                                                                                                                                                                                                                                |
   | 入口路径           | 当"工具类型"为"npm"时，需要配置。 指定npm包的入口文件路径，确保资源正确加载。                                                                                                                                                                                                                                                                                                                                                                                |
   | 版本号            | 当"工具类型"为"npm"时，需要配置。 指定npm包的版本号，避免因版本迭代引发功能异常。                                                                                                                                                                                                                                                                                                                                                                                 |
   | CDN            | 当"工具类型"为"npm"时，需要配置。 为通过CDN方式引入资源的地址。 - 部署环境不同（内网/公网）时，请根据实际情况选择合适的CDN地址。  - 如果工具包支持通过CDN地址访问，请优先填写正确的CDN地址，以减少本地依赖。   |
   | 生成utils.js代码预览 | 当"工具类型"为"npm"时，需要配置。 预览工具类生成的JavaScript代码，便于验证包引入与解构逻辑是否符合要求。                                                                                                                                                                                                                                                                                                                                                                |
   | function编辑区    | 当"工具类型"为"function"时，需要配置。 编写自定义函数的实现代码。                                                                                                                                                                                                                                                                                                                                                                                     |