How to use multiple file library with requireJs

Question

I am building a project with requireJs, my file structure is as follows:

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

And my configuration:

  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($){ .... }); 

My task is to integrate noty, which is a notification plugin that I can use in any modules. This plugin requires download:

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

I'm not sure how to do this?

• File Concatenation?

• Download each file as a dependency?

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

• Creates some kind of plugin / module for requireJs?

thanks

Answer 1

Finally, I managed to implement the third solution: I created a web module that wraps the library in a file called 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 }); } } }); 

I declared the dependencies in the shim configuration (to fix the order of the dependencies) in my app.js application:

 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 works like a charm!

Answer 2

or like this:

 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' } }