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

一、前言

上周五我接到一个任务，让我把某个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

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