在SpringBoot的Maven工程中打包AntV Graphin的演示程序

一、Graphin演示程序本地运行

Graphin的介绍见地址：

https://graphin.antv.vision/zh/docs/manual/introduction

这里就不多做介绍了。

在“快速上手”的页面里，有几个演示程序。打开图片右下角的“OpenSandbox”，进入一个全屏的编辑器界面。

通过编辑器中菜单，可以将代码导出。

解压之后，需要用npm进行编译打包。npm的安装与使用这里就不说了，不过可能是使用了阿里的代码，所以用npm打包时会出来找不到依赖的情况，这时可以安装cnpm进行打包。

下载cnpm后编译
 

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

通过

npm start

可以启动浏览器看到页面。

打包生成一个build目录：

cnpm run build

如果没有serve先安装：

npm install -g serve

然后使用serve命令启动一个服务

serve -s build

缺省是5000端口，在浏览器输入http://localhost:5000可以看到结果。
 

二、npm私有仓库

但是每次都从外网下载依赖库，有时会很慢。我这里使用verdaccio作为私有仓库。

如果使用Nexus服务器，可以参考这里：https://www.jianshu.com/p/9085f47726a2

verdaccio 虽然是一个私有仓库搭建工具，但本身也是一个基于 npm 的包。
所以需要预先安装 node 和 npm，接着执行：

# 终端
npm i -g verdaccio # 安装
verdaccio # 启动 verdaccio

 

仓库的默认地址是 http://localhost:4873/
配置文件在 ~/.config/verdaccio/config.yaml

如果是Windows系统，则一般在个人目录：

C:\Users\admin\AppData\Roaming\verdaccio

并且在浏览器中访问 http://localhost:4873/ ，可以看到一个图形化管理界面。
verdaccio 可以设置多个源，修改配置文件config.yaml，我们加入淘宝源。其中https://r.npm.taobao.org/是用命令

cnpm config ls

看到的registry的地址。

uplinks:
  npmjs:
    url: https://registry.npmjs.org/
  taobao:
    url: https://registry.npm.taobao.org/
  taobao2:
    url: https://r.npm.taobao.org/

然后可以使用私有仓库地址进行打包测试：

npm install --registry=http://localhost:4873

如果不想每次都输入私有仓库地址，可以注册到全局

npm config set registry http://localhost:4873

当然这里举例使用的是本机localhost，如果是团队共用，需要改为服务器的地址。

三、在SpringBoot工程中打包

这里是基于github上一个例子工程来测试的，地址在

https://github.com/kantega/react-and-spring

这个工程里本身带有一个nodjs程序，放在frontend目录，可以直接用Maven命令打包测试：

mvn clena package

打包完成后，用启动SpringBoot的方式启动程序：

java -jar react-and-spring-master.jar

在浏览器输入http://localhost:8080就可以看到测试页面。

之所以能打包nodejs代码，是因为在pom.xml里，使用frontend-maven-plugin插件执行npm命令进行打包的。具体可以查看官网的说明：

https://github.com/eirslett/frontend-maven-plugin

现在我们使用前面的Graphin的演示代码，替换frontend目录里的代码。

为了使用私有仓库，修改pom.xml里的配置：

<plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.9.1</version>
                <configuration>
                    <workingDirectory>frontend</workingDirectory>
                    <installDirectory>target</installDirectory>
                </configuration>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v10.16.3</nodeVersion><!--v10.16.3--><!--v8.9.4-->
                            <npmVersion>6.9.0</npmVersion><!--6.9.0--><!--5.6.0-->
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>install --registry=http://localhost:4873/</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

其中在install后面，加了registry参数，指向私有服务器地址。

这里再执行Maven打包命令

mvn clean package

 

可以看到打包后的代码放在public目录：

完成后启动Springboot程序，在浏览器输入http://localhost:8080就可以看到演示界面了。

以后可以在这个基础上，在SpringBoot里使用Graphin进行关联图展示。