如何在FastAdmin中加载第三方JS插件或自己编写插件？

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文件

文章来源：https://forum.fastadmin.net/thread/5576