关于vue3.0项目引入jtopo出现的各种问题汇总

jtopo官网demo网址：http://www.jtopo.com/demo.html
最近的项目需要用到jtopo，关于jtopo的引入，之前自己也都尝试过，没想到这次引入会出现这么多问题，所以大概总结一下

1、借用同事以前的经验来引入

npm install jtopo2
// 查看安装到的版本为0.8.4，和同事的一致
// 使用时
import jTopo from 'jtopo2'
let stage = new jTopo.stage()

此时只是最简单的引入，就会出现页面加载不出来的问题，项目不报错，但是页面一直loading，最后报错如下，原因自己也没搞明白，为什么同事用的时候正常，本人使用就出问题了

2、使用官网最新的引入方式来引入

在官网上下载下来最新版本jtopo-1.4.4_trial-esm-min.js

// 最新版本已经采用标准ESM模块化，可以直接import
import {
    Stage,
    Layer,
    Node,
    Link
} from './download/jtopo-1.4.4_trial-esm-min.js';

此时会发现，本地是能够正常使用的，然后就开开心心的进行代码开发了，然后到项目打包部署的时候，悲催了，发现，此种方法，在打包后会报如下错误

基于本人能力有限，遇到这种问题就直接傻眼了，百度此时也没有可参考的文章。没办法就只能咨询所有认识的前端同事，经讨论得出的猜想是，在打包的过程中，babel对esm文件编译转换成common文件的过程中可能出错了

首先尝试修改配置文件babel.config.js文件，让其忽略这个js文件，如下

后来发现修改配置也不行，也可能是自己没改对

接着又尝试将该js文件放在public中，在index中引入后使用

但是此时自己又卡在了如何使用的问题上

使用的时候，new Stage()会报如下错误

就是自己的引入和使用方式都还有问题

最后，咨询了一前端大拿，给到了个解决办法，经尝试，本地和打包后都能正常运行，写法对本人来说很高端，代码如下