关于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()会报如下错误
在这里插入图片描述
就是自己的引入和使用方式都还有问题

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

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_36877078/article/details/129266024