如何通过 requireJs 使用多文件库

Question

我用 requireJs 构建了一个项目，我的文件结构如下：

js/
   lib/
       noty/
           layouts/
               bottom.js
               top.js
               ...
           themes/
               default.js
           noty.jquery.js
       jquery.js
       jquery-ui.js
   user/
      user.js
   app.js

还有我的配置：

    requirejs.config({
        baseUrl: 'js/lib',
        urlArgs: 'bust=' + (new Date()).getTime(),  //only for dev  : no-cache
        paths: {
            user: '../user'
        },
        shim: {
            'jquery-ui': ['jquery'],
            'jquery-tmpl': ['jquery'],
            'gridy': ['jquery']
        }
    });
    requirejs(['jquery', 'jquery-ui'],  function($){
    ....
    });

我关心的是集成noty，这是一个我可以在任何模块中使用的通知插件。这个插件需要加载：

js/lib/noty/noty.jquery.js
js/lib/noty/layout/top.js
js/lib/noty/themes/bottom.js

我不确定这样做的方法是什么？

• 连接文件？

• 将每个文件加载为依赖项？ ：

  requirejs(['jquery', 'jquery-ui', 'noty/noty.jquery.js', 'noty/layout/top.js', etc.]

• 为 requireJs 创建某种插件/模块？

谢谢

Answer 1

或者像这样：

paths: {
    'jquery': 'jquery/1.10.2/jquery',
    'noty': 'noty/2.0/jquery.noty',
    'noty.themes.default': 'noty/2.0/themes/default',
    'noty.layouts.topCenter': 'noty/2.0/layouts/topCenter',

    app: '../app',
    util: '../util'
},
shim: {
    'noty': ['jquery'],
    'noty.themes.default': {
        deps: ['jquery', 'noty'],
        exports: 'jquery'
    },
    'noty.layouts.topCenter': {
        deps: ['jquery', 'noty'],
        exports: 'jquery'
    }
}

Answer 2

最后我设法实现了第三种解决方案：我创建了一个 Web 模块，将库包装在一个名为 notiy.js 的文件中：

define(['jquery',
    'noty/layouts/topCenter', 
    'noty/layouts/bottomRight',
    'noty/themes/default'], 
function($){

$.noty.defaults.timeout = 20000;

return  function(type, msg){
    var topLayout = 'topCenter',
        bottomLayout = 'bottomRight',
        layout = {
            'alert'     : topLayout,
            'info'      : bottomLayout,
            'confirm'   : topLayout,
            'success'   : bottomLayout,
            'error'     : topLayout,
            'warning'   : topLayout
        };

    if(msg && type){
        return noty({
            text : msg, 
            layout: layout[type] || topLayout, 
            type : type
        });
    }
}
});

我已经在我的 app.js 中声明了 shim 配置中的依赖项（以修复依赖项顺序）：

requirejs.config({
baseUrl: 'js/lib',
urlArgs: 'bust=' + (new Date()).getTime(),  //only for dev  : no-cache
paths: {
    user: '../user'
},
shim: {
    'jquery-ui'         : ['jquery'],
    'jquery-tmpl'       : ['jquery'],
    'gridy'             : ['jquery'],
    'noty/jquery.noty'  : ['jquery'],
    'notify'            : ['noty/jquery.noty']
}
});
requirejs(['jquery', 'jquery-ui', 'jquery-tmpl', 'notify'],  function($, ui, tmpl, notify){
//...
});

Ans 它就像一个魅力！