说说我是怎么把仪表盘插件JustGage引入vue项目中的

大黑 2019-06-28

一、前言

上周五我接到一个任务,让我把某个js插件放到vue的项目里使用,我打开这个网址一看,居然还要付费。机灵的我打开F12一看,把代码扒了下来,百度发现是一个国外知名开源仪表盘插件名叫JustGage。

于是开始了我这个菜鸡的漫长旅程。

二、如何引入JustGage

这个过程非常之艰难,花费了我一个星期上班时间内闲杂时间,最后终于解决。

JustGage插件依赖raphael这个svg库,所以一共需要引入的文件是两个,一个是raphael-2.1.4.min.js,另一个就是justgage.js。在普通的html页面里引入这两个文件,再初始化插件就可以直接使用。但如果直接引入到vue项目里,则会疯狂报错。

1.插入插件初始标签和初始化

在你需要引入插件的地方插入一个标签:

<div id="g1"></div>

在需要初始化的时候:

var g1 = new JustGage({
  id: "g1",
  min: 0,
  max: 100
});

g1.refresh(50);

2.引入依赖库raphael

首先尝试引入raphael-2.1.4.min.js文件:

import '文件路径/raphael-2.1.4.min.js'

会得到一个报错:

Module build failed: SyntaxError: 文件路径/raphael-2.1.4.min.js: Deleting local variable in strict mode

分析这个报错会发现是因为在严格模式下不能删除局部变量。
我把raphael-2.1.4.min.js文件里的代码格式化后找到具体的报错位置(2631行):

b.ninja = function() {
    return A.was ? z.win.Raphael = A.is: delete Raphael,
    b
},

发现这里删除了Raphael变量,所以报错。为了解决这个问题我在.babelrc文件夹里设置不用严格模式检查这个文件:

"ignore": [
    "文件路径/raphael-2.1.4.min.js"
]

这时又出现了一个新的报错:

B[b] is not a function

再去看源码发现非常困难了,因为源码里的变量全部用的abcd这种字母来表示的,完全不知道实际含义。这时我想到这个源码是压缩过的,于是我去github找到了raphael的源码,下载raphael.js文件,这个就是没有压缩的完整源码文件。

在项目里引入这个文件,在created里面就可以正常打印Raphael了。

到此第一步就成功了。

3.引入仪表盘插件JustGage

首先还是尝试引入justgage.js文件:

import '文件路径/justgage.js'

果不其然的报错了,不报错才有鬼。

JustGage is not defined

为什么引入后JustGage还是未定义呢?打开文件一看就能发现这个插件没有用es6的方法export,也不符合AMD、CMD或者CommonJS的规范。自然import是没有生效的。
这时就需要自己动手修改一下这个文件。

修改引入方式:

import JustGage from '文件路径/justgage.js'

在文件最开头修改:

var JustGage = function(config) {
    ...
}

在文件的最后修改:

export default JustGage

这时再打印JustGage发现又报了一个错:

eve is not defined

但仪表盘已经显示在页面上了!只不过没有刻度和动画,可以猜测现在只差eve.js这个文件了,引入此文件就成功了。

4.引入必须依赖eve.js文件

但是这个eve.js文件去哪里找呢?
我在raphael.js里搜索“eve”发现了一个地址:

./node_modules/eve-raphael/eve.js

先需要

npm install raphael --save

然后到/node_modules/eve-raphael地址下找到eve.js这个文件,复制到和另外两个文件同一个目录里。
然后在justgage.js的最上面引入:

var eve = require('./eve.js');

此时就没有任何报错了。

可以在vue的项目里使用JustGage插件了!!!T_T

问题是这几个文件有点大....- -||