Suppose there are three modules: m1, m2, m3
Where mi(i=1..3) is empty module:
define(function() {
return this;
})
And exists additional module useAll that depends on m1, m2, m3 modules.
What is the difference between two implementations of useAll module:
All modules on which depends useAll mentioned in define()
define(['m1', 'm2', 'm3'], function() {...})
Modules mentioned in require() function
define(function () {
require(['m1']);
require(['m2']);
require(['m3']);
...
})
Is there any issues with script loading time and order?
The diferrence is that in the second implementation your
require are treated by r.js as nested dependencies and
by default they will not get included in optimization process,
unless you specify:
findNestedDependencies
: true
From the docs:
Finds require() dependencies inside a require() or define call. By
default this value is false, because those resources should be
considered dynamic/runtime calls. However, for some optimization
scenarios, it is desirable to include them in the build.
Another difference, is that the second implementation can load
CommonJs modules too.
If you use require to define your module, you cannot return any value as a result of execution. This means, that you cannot use this module as a real dependency to another module
Related
I have a simple CommonJS module published on NPM and Bower that basically just looks like this:
function Foo(){}
module.exports = new Foo();
now the easiest way to convert to AMD format would be just to publish a second version that was AMD compatible like so:
define(function (require, exports, module) {
function Foo(){}
module.exports = new Foo();
});
but I thought there was a way you can shim the CommonJS module using requirejs.config like so:
requirejs.config({
paths:{
'foo':'assets/vendor/foo'
},
shim:{
'foo' :{
exports: 'Foo'
}
}
});
but this doesn't seem to work. I figure that the shim tool does the wrapping that I did above for you, but I am not entirely sure.
The Problem
shim cannot do as much as you want it to do. When RequireJS evaluates the symbol you give in exports, it evaluates it in the global space. So using exports works fine if you can access the variable you want to export from the global space. If library foo exports Foo into the global space, that works fine.
What you are trying to do is have a module that exports its API through module work with a shim. This cannot work because RequireJS cannot guess that the module being loaded requires that a global module object be already available to the module being loaded. In the simplest case, loading such module will result in a ReferenceError because module does not exist. There would be ways to fake the module.exports thing that would work in the most trivial cases but it would not work as a general solution.
A Solution
You can use r.js to convert files that are written in the CommonJS format to what RequireJS needs. It is documented here. The documentation gives the following synopsis:
node r.js -convert path/to/commonjs/modules/ path/to/output
You should also read this part of the README for some caveats.
I'm working on the project that uses require.js and I was faced with a simple question about declaring libraries as dependencies within every single modules. I saw many examples with require.js and in every of them libraries like Backbone, jquery, underscore etc was declared in every module. And it would be fine if your application consists of only couple of modules. But if your application has 40-50 modules it becomes a bit tedious to define jquery every single time.
On the other hand we can load all libraries into the require() this way:
// Just an example
require.config({
paths: {
jquery: '../bower_components/jquery/jquery',
underscore: '../bower_components/underscore/underscore',
backbone: '../bower_components/backbone/backbone'
}
});
require(['jquery', 'underscore', 'backbone'], function () {
require([
'app',
'bootstrap'
], function (App) {
var app = new App();
document.body.appendChild(app.el);
});
});
And then we can use Backbone, '_' and '$' into the App without declaring them as dependencies.
So I'm trying to understand why we should define them every time. Is it just a strict adherence to the Module pattern or something else?
Thanks.
Having your libraries passed in as arguments to your require factory function is a form of dependency injection. Now, depending on exactly how AMD-friendly your library dependencies are, you may even be able to use several different versions of the library at once in an application. Writing your modules in this way with explicit library dependencies can allow you future flexibility of mixing modules which require jQuery 1.8 and jQuery 2.0, for instance. A different jQuery version can be passed to each module.
When you don’t define all your dependencies explicitly every time, then you’re relying on the global variable (window.$ or window._) created as a side effect of loading the library. In that case, all the modules have to depend on the same version of the library.
I have seen several examples that use this:
main.js
/*global require*/
'use strict';
require.config({
paths: {
angular: './angular',
app: './Content/app',
ngAnimate: './Scripts/angular-animate',
uiRouter: './Scripts/angular-ui-router'
},
shim: {
angular: {
exports: 'angular'
}
}
});
require(['angular', 'app'], function (angular) {
angular.bootstrap(document, ['app']);
});
Can someone explain to me why the shim is needed? My application uses other modules such as angular-ui router, jQuery etc. Do I need to do something similar and add a shim for these?
The rule is pretty simple: if a library/script/package/plugin is AMD-aware, then you don't need a shim. (Actually, you must not use a shim for it.) If it is not AMD-aware, then you need a shim.
A library/etc is AMD-aware if it detects that an AMD loader is present and calls define to make itself known to the loader.
jQuery from about 1.8 onwards has not needed a shim because it calls define. Angular, on the other hand, does not call define.
To know whether a specific piece of code needs a shim, you can read its documentation or if the documentation is not clear on this, then you can check the source code for a call to define. For instance jQuery 1.11.0 has this code:
// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
});
}
How it looks like will vary from one case to the other but the basic think you want to look for is the check that define exists, is a function, has the amd property set and the call to define.
(Note that jQuery is a special case where they decided to hard code the name of the module in the define call (first parameter: jquery). Generally the name of the module won't be present in the define call but will be left for RequireJS to infer on the basis of the file name.)
Im using requirejs to load several modules of a web app im building but am struggling to understand something. I have my main module requiring it dependancies but the other defined modules all reference each other in someway. so lets say the 'project/func' module may call a save function in the 'project/save' module. Now most of my code has resulted in undefined being errored.
From reading online maybe Ive hit something known as a circular reference?? Im not quite sure. I guess I need to know what Im doing wrong and how I should be doing it. Ive tried to put an example below with the main file calling the bootstrap method in one of the modules but that module calls another module at some point. This is just a small example. the real app has many many more modules and they all need to run functions inside each others if that makes sense.
//main require
require(['jquery', 'jqueryui', 'project/save', 'project/funcs', 'project/spec'], function($, ui, proSave, proFunc, proSpec){
proFunc.bootstrap();
});
//project/save
define(function(){
var save = function(){
//do some save stuff here
}
return {
save: save
}
});
//project/funcs
define(['project/save'], function(proSave){
var funcs = {
bootstrap: function(){
//do some stuff
funcs.func1();
},
func1: function(){
//do some stuff and save
proSave.save();
}
}
return {
funcs: funcs
}
});
RequireJS has documentation on circular dependencies that explains how to handle them:
If you define a circular dependency (a needs b and b needs a), then in this case when b's module function is called, it will get an undefined value for a. b can fetch a later after modules have been defined by using the require() method (be sure to specify require as a dependency so the right context is used to look up a):
//Inside b.js:
define(["require", "a"],
function(require, a) {
//"a" in this case will be null if a also asked for b,
//a circular dependency.
return function(title) {
return require("a").doSomething();
}
}
);
So you have to write your code to be able to work with the fact that module definitions in circular dependencies will initially be undefined. The details of how you accomplish this are dependent on the specific structure of your application.
These words of wisdom, from the RequireJS documentation, are well worth paying attention to:
Circular dependencies are rare, and usually a sign that you might want to rethink the design.
[Emphasis added.] Very often, if module A depends on B and B depends on A, there's a subset of functionality to be extracted either from A or B and moved into a module C which would allow A to depend on C rather than B, and B to depend on C rather than A, and break the circular dependency. For the sake of everyone working with such code, this is the best route to take. Then, in the rare cases where the circularity cannot be removed, the documentation I cited above tells you how to approach it.
I have being playing around with requirejs for the last few days. I am trying to understand the differences between define and require.
Define seems to allow for module separation and allow for dependency ordering to be adhere. But it downloads all the files it needs to begin with. Whilst require only loads what you need when you need it.
Can these two be used together and for what purposes should each of them be used?
With define you register a module in require.js that you can then depend on in other module definitions or require statements.
With require you "just" load/use a module or javascript file that can be loaded by require.js.
For examples have a look at the documentation
My rule of thumb:
Define: If you want to declare a module other parts of your application will depend on.
Require: If you just want to load and use stuff.
From the require.js source code (line 1902):
/**
* The function that handles definitions of modules. Differs from
* require() in that a string for the module should be the first argument,
* and the function to execute after dependencies are loaded should
* return a value to define the module corresponding to the first argument's
* name.
*/
The define() function accepts two optional parameters (a string that represent a module ID and an array of required modules) and one required parameter (a factory method).
The return of the factory method MUST return the implementation for your module (in the same way that the Module Pattern does).
The require() function doesn't have to return the implementation of a new module.
Using define() you are asking something like "run the function that I am passing as a parameter and assign whatever returns to the ID that I am passing but, before, check that these dependencies are loaded".
Using require() you are saying something like "the function that I pass has the following dependencies, check that these dependencies are loaded before running it".
The require() function is where you use your defined modules, in order to be sure that the modules are defined, but you are not defining new modules there.
General rules:
You use define when you want to define a module that will be reused
You use require to simply load a dependency
//sample1.js file : module definition
define(function() {
var sample1 = {};
//do your stuff
return sample1;
});
//sample2.js file : module definition and also has a dependency on jQuery and sample1.js
define(['jquery', 'sample1'], function($,sample1) {
var sample2 = {
getSample1:sample1.getSomeData();
};
var selectSomeElement = $('#someElementId');
//do your stuff....
return sample2;
});
//calling in any file (mainly in entry file)
require(['sample2'], function(sample2) {
// sample1 will be loaded also
});
Hope this helps you.
"define" method for facilitating module definition
and
"require" method for handling dependency loading
define is used to define named or unnamed modules based on the proposal using the following signature:
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for instantiating the module or object*/
);
require on the other hand is typically used to load code in a top-level JavaScript file or within a module should you wish to dynamically fetch dependencies
Refer to https://addyosmani.com/writing-modular-js/ for more information.
require() and define() both used to load dependencies.There is a major difference between these two method.
Its very Simple Guys
Require() : Method is used to run immediate functionalities.
define() : Method is used to define modules for use in multiple locations(reuse).