在前端项目中集成自定义工具类

前提条件

已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。

新建工具类

1. 在页面设计器的左侧插件功能区，单击，展开“资源管理”面板。
2. 单击上方的，展开“添加工具类”页面。
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”时，需要配置。 编写自定义函数的实现代码。