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.
Related
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."
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();
});
I will try to simplify my problem. I've got a main application (single page app essentially) that requires javascript files based on its own config file.
The json config file looks like this (that config file is not related to requirejs, it is the app own config file):
"modules": [
{
"categories": "categories/main"
}
]
The main application is basically loading its config json file, and requiring the modules on runtime, something like:
function loadModule(id, modulePath) {
require([modulePath], function(module) {
// modulePath is categories/main
});
}
I've got an AMD config that looks like that:
require.config({
'paths': {
'categories':'js/app/modules/categories',
The module looks like this:
define('categories/main', [
'categories/data/navigation'
], function (
navigation
) {
'use strict';
var CategoriesModule = function() {
};
CategoriesModule.id = 'categories';
return CategoriesModule;
});
So this is working all fine with non-minified version.
Note that even though I dynamically load the modules in my app, I still want the modules to be minified inside the only one minified file that I have in my app. I do not want to make an http request at runtime to load the module.
For this I have included the module in my optimization build:
require.config({
include: [
'app/modules/categories/main'
This works just fine as well, but here is what I am trying to do.
If you look back at the module, it requires another file: 'categories/data/navigation'.
And this file is not minified because apparently r.js has no way of following the dependencies of files that are loaded at runtime.
I kind of expected r.js to follow the dependencies of what I have "included" in this optimization build config.
So to solve the problem, I would need to do the following in my optimization build config:
require.config({
include: [
'app/modules/categories/main',
'app/modules/categories/data/navigation'
In other words, list of the files that the module is using, which is what I'm trying to avoid.
I thought findNestedDependencies would solve the problem but it doesn't. Here is my r.js config for information:
options: {
paths: {
'main': 'js/main'
},
logLevel: 0,
baseUrl: 'public',
mainConfigFile: ['build/optimization/require.config.js', 'public/js/app/config/amd.js'],
generateSourceMaps: false,
preserveLicenseComments: true,
name: 'main',
out: 'public/js/main.min.js',
removeCombined: true,
findNestedDependencies: true,
uglify: {
beautify: false,
mangle: false
}
}
This app is fairly large and it is important for me to limit the required work needed when creating a module, a "plug and play" module is what I am after.
Listing all the files the module is using for minification is something I'd like to find a solution for.
Any hint? Any idea?
Why is r.js not able to follow the dependencies of my module when I include the main file of the module in the optimization config?
Any help appreciated.
Cheers.
I will answer my own question. r.js wasn't able to follow the dependencies of the modules because I included the full path of the module in the build optimization config. Using the path shortcut, which is also the defined name of the module, r.js is then able to follow the dependencies.
I'm not sure why but I guess it probably makes sense.
Rather that using:
require.config({
include: [
'app/modules/categories/main'
The include should be:
require.config({
include: [
'categories/main'
Probably because of the require config path:
require.config({
'paths': {
'categories':'js/app/modules/categories'
Hope that will help someone with the same kind of problem!
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