I have a problem with optimization with r.js
I have a project that have multiple requirejs config file
+ app
- module1
* main.js
* foo.js
* bar.js
- main.js
+ build.js
that each main.js has self packages
main.js code is:
requirejs.config({
'baseUrl': '../app/',
'paths': {
'module1' : 'module1/main'
}
});
define(['module1'],function(){});
module1/main.js code like:
requirejs.config({
'paths': {
'foo' : 'module1/foo',
'bar' : 'module1/bar'
}
});
define(['foo','bar'],function(){});
and build.js file is like:
({
mainConfigFile: 'app/main.js',
baseUrl: 'app',
name: 'main',
out: 'dist/main.js',
})
when I execute $ r.js -o build.js it return an error
Tracing dependencies for: main
Error: ENOENT: no such file or directory, open 'D:\Project\Test\app\foo.js'
In module tree:
main
module1
Error: Error: ENOENT: no such file or directory, open 'D:\Project\Test\app\foo.js'
In module tree:
main
module1
at Error (native)
To my knowledge, r.js is simply not able to process multiple requirejs.config calls when it builds a bundle. I've never seen any documentation or issue report, or working example that contradicts this. (RequireJS will let you call requirejs.config multiple times, and combine the configurations passed at run time but this is not the same as having r.js process multiple calls to requirejs.config.
You'll have to combine all your calls to requirejs.config into a single call that you point r.js to with mainConfigFile.
I've recreated your setup on my machine and got the same error you did. If I modify the config in app/main.js to the following, then I can build the bundle:
requirejs.config({
'baseUrl': '../app/',
'paths': {
'module1' : 'module1/main',
'foo' : 'module1/foo',
'bar' : 'module1/bar'
}
});
Just for kicks, I've also tried the following which does not work:
requirejs.config({
'baseUrl': '../app/',
'paths': {
'module1' : 'module1/main'
}
});
requirejs.config({
'paths': {
'foo' : 'module1/foo',
'bar' : 'module1/bar'
}
});
(Note also that baseUrl in the above could be simplified to . rather than ../app/.)
Related
Getting a module is not defined error attempting to import a module from the local project. Using node and requirejs -
Error: Evaluating /Users/Projects/stash/NODE/project_js/src/foo.js as module "foo" failed with error: ReferenceError: module is not defined
Code looks like -
(function() {
const requirejs = require('requirejs')
requirejs.config({
baseUrl: __dirname,
nodeRequire:require
});
//var foo = requirejs('foo.js');
requirejs(['foo'], function() {
foo().then(data => {
data.foreach(function(item, index, data) {
console.log(JSON.stringify(item))
})
});
})
})();
The module has the following export -
module.exports = function foo() {
.
.
.
return results
}
I've tried loading the module synchronously as well.
Check this part of their doc: if the module to be loaded (foo here) is found by RequireJS (i.e. its configuration allows it to find the module), then this module has to be declared using define instead of Node's exports.
I just tried this, which works:
directory structure
test/
index.js
foo.js
index.js
(function() {
const requirejs = require('requirejs');
requirejs.config({
baseUrl: __dirname,
nodeRequire:require
});
requirejs(['foo'], (foo) => {
console.log('loaded!', foo, foo());
});
})();
foo.js (that's the interesting part)
define(function() {
return function foo() {
return 'fooResult';
}
});
Using module.exports = ... gave me the error you have.
However this RequireJS API is not "loadable" by Node's built-in require, hence the need for a precise configuration that reflects a clear separation between Node-required modules (CommonJS API) and RequireJS-defined modules (AMD API). (Actually you can check the whole "Why AMD?" page, that should help a lot for your work with RequireJS.)
We are using AMD modules in our project. I want to use a 3rd party commonJS module that is installed through npm install. I had a problem which shim. Hence trying another strategy to use commonJS module in my requireJS build.
So, I am trying to use instructions mentioned here to declare my commonJS module in my AMD build. Here I am facing a different problem. Although I see the r.js is able to load node module in gulp process, its not able to load node module when exceuting
// NOT WORKING. WHY ??
requirejs.optimize(config, function(buildResponse){
console.log('build response', buildResponse);
}, cb);
Here is my full gulp file :
var gulp = require('gulp');
var requirejs = require('requirejs');
config = {
name: 'src/app',
baseUrl: ".",
out: 'dist/app.build.js',
nodeRequire: require,
paths: {
"jquery": "lib/jquery-1.12.0",
"underscore": "lib/underscore"
}
};
requirejs.config(config);
gulp.task('requirejs', function (cb) {
// WORKING: r.js is able to load dagre-d3 in commonJS path
console.log('1.5 dagreD3: ' + requirejs('dagre-d3'));
// WORKING: r.js is able to load dagre-d3 in commonJS path
requirejs(['dagre-d3'], function ( dagreD3 ) {
console.log('2 dagreD3: ' + dagreD3);
});
// NOT WORKING. WHY ??
requirejs.optimize(config, function(buildResponse){
console.log('build response', buildResponse);
}, cb);
});
// The default task (called when you run `gulp` from cli)
gulp.task('default', ['requirejs']);
Here is my git repo illustrating the problem.
Following is the error iam getting while executing gulp:
[11:30:55] Starting 'requirejs'...
1.5 dagreD3: [object Object]
[11:30:55] 'requirejs' errored after 339 ms
[11:30:55] Error: Error: ENOENT: no such file or directory, open '/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/dagre-d3.js'
In module tree:
src/app
at Error (native)
at /Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:25150:19
at /Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:3056:39
at /Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:2996:25
at Function.prim.nextTick (/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:24901:9)
at Object.p.errback (/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:2995:26)
at Object.p.callback (/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:2981:23)
at Object.p.promise.then (/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:3035:23)
at build (/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:25107:12)
at runBuild (/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:27115:17)
at Object.context.execCb (/Users/akandregula/arun/amd-practice/using_commonJS_module_with_amd/node_modules/requirejs/bin/r.js:1943:33)
2 dagreD3: [object Object]
Running into an issue when I run the RequireJS optimizer... I have the following defined in my main config file:
require.config({
config: {
bootstrap: {
autoload: true
}
},
...
}
Then in my bootstrap.js file I do:
define(['module', 'app'], function (module, App) {
'use strict';
console.log(module.config().autoload);
...
});
But autoload is undefined :( The variable is available in the non-optimised version however.
I've tried this with other modules and other variables, but essentially no module config is being pushed through into the output file from Require's Optimizer.
Is this expected behaviour ?
I know this is a bit late, but I had spent close to half a day struggling with the same problem and finally found that this worked:
Apparently config.js file or the main config is compile time configuration and wont be part of run/build config. So the solution is to add the module config to the top of the main.js file using requirejs.config({}); (this is for the case that it already worked with config prior to compiling and minifying/uglifying).
eg:
at top of main.js add:
requirejs.config({
config: {
bootstrap: {
autoload: true
}
}
};)
I am doing my first try using requireJS and it works great !
I now would like to use the optimizer and i meet some issues when running my code in the browser.
I have these JS files:
/public/javascripts/build.js
/public/javascripts/main.js
/public/javascripts/lib/jquery.min.js
/public/javascripts/lib/require.min.js
/public/javascripts/a.js
/public/javascripts/b.js
/public/javascripts/c.js
a.js, b.js and c.js are modules i define for my application using requireJS.
main.js:
require.config({
paths: {
'jQuery': 'lib/jquery.min.js'
},
shim: {
'jQuery': {
exports: '$'
}
}
});
require(['a.js'], function(A){
var Entity = new A();
});
build.js
({
baseUrl: ".",
paths: {
requireLib: "lib/require.min",
jquery: "lib/jquery.min"
},
name: "main",
out: "main-built.js",
include: ["requireLib"]
})
Also i am wondering why do we have to specify the paths of the libraries into the build.js and not the other javascript files.
When i do not use the optimizer and only load the file
<script src="/javascripts/lib/require.min.js" data-main="/javascripts/main"></script>
it works great, but when i run r.js -o ./public/javascripts/build.js and only load
<script src="/javascripts/main-built.js"></script> i get the error Uncaught TypeError: undefined is not a function in the minified code.
How to explain that ?
Here are the logs i get when running r.js
Tracing dependencies for: main
Uglifying file: /public/javascripts/main-built.js
/public/javascripts/main-built.js
----------------
/public/javascripts/lib/require.min.js
/public/javascripts/a.js
/public/javascripts/b.js
/public/javascripts/lib/jquery.min.js
/public/javascripts/c.js
/public/javascripts/main.js
This is definitely wrong:
require(['a.js'], function(A){
var Entity = new A();
});
You should not use extensions in the list of dependencies you give to require or define. Modules should be named without extension. So here 'a', not 'a.js'. Using 'a.js' will cause RequireJS to fail loading what you really want once the optimizer has run. Let's say you have a file named a.js which has:
define(function () {
return function () {};
});
The optimizer will include it into your main-built.js file like this:
define("a", function () {
return function () {};
});
Note how the first parameter to define is now "a". This has been added by r.js. This is the name of the module. When you load main-built.js, a module named "a" is defined. When you use require with "a.js", you are telling RequireJS you want something in a file named a.js so RequireJS will go looking for that and ignore what is in main-built.js.
Also, jQuery 1.8 or over does not need a shim.
I just have added
shim: {
'jQuery': {
exports: '$'
}
}
into the build.js file, and it works perfectly !
Thanks !
I'm having an issue attempting to create a RequireJS shim for some javascript code that was written by another team in my organization. The script is loaded via a noraml HTML script as such:
<script src="MyCustomModule.js" type="text/javascript"></script>
My main.js contains the following:
requirejs.config({
paths: { 'text': 'durandal/amd/text' },
shim: {
'MyCustomModule': { exports: 'My.Custom.Module' }
}
});
And I have tried accessing the custom module in a variety of ways, but this is my current code:
define(['MyCustomModule'], function (require, MyCustomModule) {
...
}
But each time the page/app loads I get an error from RequireJS indicating that it failed to load app/MyCustomModule.js (and I can see the 404 error in the console where it attempted to request the file from the server). What am I doing wrong?
You also need to include MyCustomModule in paths:
requirejs.config({
paths: {
'text': 'durandal/amd/text'
'MyCustomModule': 'path/to/MyCustomModule'
},
shim: {
'MyCustomModule': {
exports: 'My.Custom.Module'
}
}
});
If you don't do that, define(['MyCustomModule'] (...) will look for the dependency in the baseUrl location, in your case: app/MyCustomModule.
In other words: shim can't "pick up" global variables that are not loaded by RequireJS.