FastAdmin基於RequireJS進行前端JS模組的管理，因此如果我們需要再引入第三方JS外掛，則必按照RequireJS的規則進行載入。如果你還不瞭解什麼是RequireJS，可以先簡單瞭解下RequireJS，相關連結：http://www.ruanyifeng.com/blog/2012/11/require_js.html

載入第三方JS外掛

如果需要在FastAdmin載入第三方外掛，我們必須修改

前臺 require-frontend.js或frontend-init.js 後臺 require-backend.js或backend-init.js 對應的檔案，定義外掛的名稱和依賴。 這裡我們以huebee

這個外掛(https://github.com/metafizzy/huebee )為示例來引入

首先我們看huebee這個外掛介紹可以通過bower install huebee --save進行一鍵安裝，安裝成功後我們可以在public/assets/libs/huebee找到下載的原始碼。

通過簡單閱讀huebee這個外掛的原始碼的首尾部分可以看到它是支援直接使用RequireJS進行載入的。鑑別辦法是看原始碼首尾是否有如下相似程式碼：

  /* jshint strict: false */ /* globals define, module, window */
  if ( typeof define == 'function' && define.amd ) {
    // AMD - RequireJS
    define( 'ev-emitter/ev-emitter',factory );
  } else if ( typeof module == 'object' && module.exports ) {
    // CommonJS - Browserify, Webpack
    module.exports = factory();
  } else {
    // Browser globals
    global.EvEmitter = factory();
  }
 

如果採用AMD規則支援RequireJS，則我們可以直接使用require(['/public/assets/libs/huebee/huebee.pkgd.min'])這樣進行使用，但是這種寫法體驗極差，而且產生目錄問題。因此接下來我們在backend-init.js中新增如下程式碼進行定義：

define(['backend'], function (Backend) {
    require.config({
        paths: {
            'huebee': '../libs/huebee/dist/huebee.pkgd.min',
        },
        shim: {
            'huebee': {
                deps: [
                    'jquery',
                    'css!../libs/huebee/dist/huebee.min.css'
                ],
            },
        }
    });
});
 

首尾兩行是backend-init.js中自帶的，重點是require.config這部分。 其中paths是定義huebee這個名稱對應的路徑。後續我們使用時則可以直接採用require(['huebee'])進行引入 下方的shim是依賴配置，我們定義huebee它的依賴為jquery和一個CSS檔案。如果外掛沒有依賴，則可以不寫此部分。

如果一個第三方外掛沒有采用AMD規範編寫，則我們需要先定義它的特性後再進行使用，比如我們FastAdmin中使用的plupload上傳外掛(https://github.com/moxiecode/plupload )，則我們需要在定義它的特性和依賴，程式碼如下：

    require.config({
        paths: {
            'plupload': '../libs/plupload/js/plupload.min',
        },
        shim: {
            'plupload': {
                deps: [
                    deps: ['../libs/plupload/js/moxie.min'],
                    exports: "plupload"
                ],
            },
        }
    });

exports這個為輸出的變數名，表示在模組外部呼叫時返回的值，比如

require(['plupload'], function(Up){
    //這裡的Up的值就是plupload這個變數的值
});

載入自定義模組或外掛

上面介紹了載入第三方外掛的方法，如果我們需要編寫自己的模組，然後使用RequireJS進行載入，那又該如何操作呢？ 其實在FastAdmin中有大量的自定義模組，比如require-upload.js、require-form.js、addons.js等等這些都是我們自定義的模組，自定義模組可以直接新增一個JS檔案到/public/assets/js/目錄下，比如我們新增一個test.js檔案，然後它的內容是：

define(['plupload'], function(Up){
   var Obj = {
      name:"testname"
   };
   return Obj;
});

define表示定義,第一個引數表示依賴的外掛。然後我們就可以在其它任何模組中呼叫這個test模組了，比如：

require(['test'], function(Test){
    //此時Test.name的值為:testname
    alert(Test.name);
});

自定義模組對於第三方外掛一個比較大的區別，就是我們不需要require.config去定義外掛名稱或依賴，直接使用即可。

特別注意的是，如果我們修改了require-backend.js或backend-init.js檔案，在部署到生產環境前需要使用php think min -m all -r all壓縮打包一下JS和CSS檔案