說說我是怎麼把儀表盤插件JustGage引入vue項目中的

1、前言

上週五我接到一個任務，讓我把某個js插件放到vue的項目裏使用，我打開這個網址一看，竟然還要付費。機靈的我打開F12一看，把代碼扒了下來，百度發現是一個國外知名開源儀表盤插件名叫JustGage。

因而開始了我這個菜雞的漫長旅程。

2、如何引入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

問題是這幾個文件有點大....- -||