In RequireJS, it's possible to configure paths explicitly for given modules. For example, you can specify that for module foo the module bar should be loaded instead (file bar.js should be loaded):
require.config({
paths: {
"foo": "bar"
}
});
How can I do the same, but for all modules?
I tried using an asterisk, but it will only create a mapping for module * literally:
require.config({
paths: {
"*": "bar"
}
});
According to your question and comment
The TypeScript compiler is able to compile multiple external modules into named AMD modules placed into a single output file. However, to effectively use those modules, RequireJS must be configured so that it knows where to find them.
There is a work-around can be applied. First of all, let's not define any module paths in config except the path for all modules.
require.config({
paths: {
"all": "path/to/all/modules"
},
deps: { "all" } // This to tell requireJS to load 'all' at initial state.
});
And then load the config/main file
<script data-main="scripts/main" src="scripts/require.js"></script>
From this requireJS will simply read all the define() blocks in modules.js. It will registering all the module names you got in the js file. For example if you got define('myModule', [function(){...}]); in your module.js. You can simply call to load it at any place without define a path for it.
For example some where in your code.
requirejs(['myModule', function(myModule){
myModule.doSemething();
});
Related
I have an error when I load datatables js.
Load timeout for modules: datatables
It is possible I have some wrong configuration (path).
How can I check where requirejs expects file ? Can I get path from module in requirejs ?
I don't see any fail load file in Chrome console.
"datatables": "DataTables/DataTables-1.10.15/js/jquery.dataTables.min",
"datatables.net": "DataTables/DataTables-1.10.15/js/jquery.dataTables.min",
If you put two different module names pointing to the same file path in your paths configuration, then that's not going to work: RequireJS will error out.
If you want two module names to resolve to the same file, what you should do is use map to perform the mapping and leave only one module in paths, like:
paths: {
"datatables.net": "DataTables/DataTables-1.10.15/js/jquery.dataTables.min",
},
map: {
"*": {
datatables: "datatables.net",
},
}
The map setting makes it so that when any module ("*") makes a request for the module named datatables it receives the module named datatables.net instead.
I'm using gulp.js and an optimization tool for requirejs (gulp-requirejs) it combines all scritps into one file. I have one define module with no name but it generates a name for it. The problem is I don't know how to call that module from another file.
For example in page1.js:
...
define("map",["jquery"],function($){
...
});
define("lib", ["jquery"],function($){
...
});
and in page2.js I would like to call page1.js lib module but I am not sure how to do it? I would prefer if the optimization tool did not set a name then my code works but this way I have no idea how to make it work. Any ideas?
It is not possible to use multiple modules in a single file, unless these modules are named. Otherwise RequireJS won't know how to relate a request for a module with the actual code that defines it.
The typical scenario when optimizing all modules into a single bundle is that there is going to be one specific module in the bundle which serves as the entry point of your application, and then you can just put that module name in paths:
require.config({
paths: {
lib: 'path/to/page1',
}
});
If you do not have a single entry point but may in fact also have code outside the bundle that will initiate loading modules that are in the bundle, then you need to list those modules in bundles:
require.config({
paths: {
lib: 'path/to/page1',
},
bundles: {
lib: ['map', ...],
}
});
The bundles setting I have shown above says essentially "when you look for the module named map, fetch the module lib, and you will have the definition of map."
I have a Javascript application spanning multiple files using RequireJS, which I want to concatenate into one for the production environment.
I've been looking at grunt-contrib-requirejs but the instructions for setting up the configuration in Gruntfile.js assume that you already have the concatenated, production source. I'm aware that I could also use grunt-contrib-concat for this, but I was wondering if there's a way to do it with the grunt-contrib-requirejs module.
I've also tried using a wildcard selection for the name field in the configuration, but although Grunt works fine with specifications like app/**/*.js grunt-contrib-requirejs doesn't concatenate them when I specify this.
I found this example on how to do this, but when I include multiple entries in the modules array, running Grunt complains that certain files can't load their dependencies that are specified in the main file's require.config.
For example, if this is main.js:
require.config({
paths: {
'angular': 'http://some.cdn/angular.min'
},
shim: {
angular: {
exports: 'angular'
}
}
});
//Set up basic code
And this is controllers/ctrl.js:
define(['angular'], function(angular) {
...
});
Then it's apparently not loading the configuration from main.js and complains that there's no file /my/project/controllers/angular.js
I've also tried moving the configuration to a file specified with the mainConfigFile option, but this option does not work and it seems that this option was meant to take the Grunt configuration and not the RequireJS configuration.
I'm learning how to use require.js. I am trying to define modules like this:
define('presenter', ['jquery'].......
The problem is that my host page is on a different domain at 'http://localhost:62607/' so I get a 404 error looking for presenter there.
Presenter is actually located here: 'http://localhost:62588/scripts/app/presenter'.
So if I define presenter like:
define('http://localhost:62588/scripts/app/presenter', ['jquery'],
Everything works fine but I much prefer the more readable first version.
Is there anything that can be done to achieve this?
Thanks
You can use the baseUrl and path properties in the requireJS configuration for achieving this.
From the requireJS documentation:
requirejs.config({
//By default load any module IDs from js/lib
baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
app: '../app'
}
});
If you define a module called app, requireJS will look for it at ../app
I'm using requirejs with the text plugin. By default, requirejs assumes text.js lives in your baseUrl. However, I want to keep it somewhere else. Where/how/when do I need to configure requirejs?
To add to shioyama's answer, the .js in the "/absolute/path/to/text.js" is not necessary. It is appended when require.js checks the path:
requirejs.config({
paths: {
"text": "/absolute/path/to/text"
}
});
You can use requirejs's path config for this. From the documentation:
paths: path mappings for module names not found directly under baseUrl. The path settings are assumed to be relative to baseUrl, unless the paths setting starts with a "/" or has a URL protocol in it ("like http:").
So you could do something like this:
requirejs.config({
paths: {
"text": "/absolute/path/to/text.js"
}
});
Then you can use text as a dependency in modules and require.js will know to look for the file in /absolute/path/to/text.js.