1. 内容概述

现在许多前端开发人员使用 npm 包进行管理应用，为了更方便此类用户直接添加Wyn 产品插件，例如仪表板设计器、报表设计器、各种数据集设计等等，我们将产品制作成了NPM集成包。

NPM集成包是具有用于集成所有插件的统一接口的包，可以降低在其项目中学习、开发和维护集成的复杂性。

用户可以将NPM包添加到项目并用于启动插件应用程序。

2. 集成方法介绍

进行NPM集成时首先依赖一个总包，您需要将其下载到本地并解压缩：gces-integration-npm.7z

支持多种语言形式的项目集成，如react、active、angular、vue等，各种语言框架不同，但集成时的原理都是相同的。

这里我们以react为例进行介绍，示例包：gces-integration-react.7z。

首先新建一个Terminal，然后输入npm i 启动工程。

接下来关联npm 总包，输入 npm i 加上总包所在具体路径。

接下来，输入 npm start 启动工程。

工程启动后会自动打开一个网页。在页面中可以看到我们示例中给出的所有插件，即左侧列表。实际使用中您可以根据自己的实际需要选择部分插件进行集成即可。

代码介绍：

示例插件包中将所有可能用到的插件都列举出来了，您可根据需要删减。

首先来看这部分截图：

• 上方为插件的名称，您可以自定修改。
• 下方为需要集成的站点的访问地址以及您集成时使用的用户Token（会使用该用户的权限），都是必须的。

接下来可以看到一个个的插件 case，需要哪个插件就添加哪个插件的代码。

case 中定义了集成插件的语言、使用的系统主题等。当您集成设计器插件时，如果提供了文档的Id，如DashboardId，则会打开该文档的编辑状态。