When should I use paths
versus packages
in RequireJS? Is there a best practice for this or are there particular times when I should consider using one over the other?
I've followed the docs and I came up with this:
// main.js
requirejs.config({
enforceDefine: true,
urlArgs: "bust=" + (new Date()).getTime(),
baseUrl: "./js",
waitSeconds: 7,
paths: {
"jquery": [
'jquery'
],
"underscore": [
'underscore'
],
"backbone": [
'backbone'
],
"handlebars": [
'handlebars'
]
},
shim: {
"underscore": {
deps: [],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
"handlebars": {
deps: [],
exports: "Handlebars"
}
} // End shim
}); // End config
// List all files; use 'define()' and not 'require()' because of shim
define([
'jquery',
'underscore',
'backbone',
'handlebars'
], function ($, _, Backbone, Handlebars)
{
console.log("$: " + typeof $);
console.log("_: " + typeof _);
console.log("Backbone: " + typeof Backbone);
console.log("Handlebars: " + typeof Handlebars);
}
); // End define
However, I viewed a video from Jesse Warden (http://css.dzone.com/articles/video-basics-requirejs) and he seems to use this style for most of his code:
// main.js
requirejs.config({
urlArgs: "bust=" + (new Date()).getTime(),
baseUrl: "./js",
waitSeconds: 7,
packages: [
'main',
{
name: 'jquery',
location: 'libs/jquery',
main: 'jquery'
},
{
name: 'underscore',
location: 'libs/underscore',
main: 'underscore'
},
{
name: 'backbone',
location: 'libs/backbone',
main: 'backbone'
},
{
name: 'handlebars',
location: 'libs/handlebars',
main: 'handlebars'
}
]
}); // End config
So which is the proper way? Should I use paths
or packages
? Also, there is a modules
config. When do I use modules
?
RequireJS has been a hugely influential and important tool in the JavaScript world. It's still used in many solid, well-written projects today.
RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code.
As per RequireJS API documentation, shim lets you. Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.
AMD and CommonJS are both Javascript module loader. They accomplish the same task but works different. AMD is better for browser, hence, the name 'Asynchronous', as it loads each distinct module in async manner instead of loading in one large file. No extra steps are required to use AMD, it works out-of-the-box.
The word packages
refers to the standard CommonJS, because requirejs supports loading modules that are in a CommonJS Packages directory structure and the modules themselves should be in a module format that RequireJS can understand.
The paths config could be for a directory and for files (.js, requirejs modules ) also. Is a little confusing because as you stated you can use packages to load non standard CommonJS packages.
When do I use modules?
everything in requirejs declared within : define('name', callback);
is a module
Hope this answer helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With