Menu
I have a simple requirejs project that I am trying to optimize to one file using node. The project structure is like so.
|___index.html
|
├───css
│ style.css
│
└───scripts
│ main.js
│
├───lib
│ require.js
│ underscore.js
│
└───modules
module1.js
module2.js
module3.js
here is my build file
//build.js
({
baseUrl: "./SimpleRequireJsProject/scripts",
name:"main",
out:"main-built.js"
})
With r.js and build.js outside the project file. I ran the optimizer using node console.
node r.js -o build.js
Everything works well. the output main-built.js gets created. But when I replace the
<script data-main="scripts/main" src="scripts/lib/require.js"></script>
with
<script data-main="scripts/main-built" src="scripts/lib/require.js"></script>
when I run the index file. There is no error but there is no output. I am expecting the console messages like so. which works with the original data-main as main
//output main started m1 started m2 started..starting m3 from m2 m3 started
Please help me find out why the project doesn't run and there is no error as well. :(
//main.js
define([
'lib/underscore',
'modules/module1',
'modules/module2'
],
function (_, Module1, Module2) {
console.log('main started');
var module1 = new Module1();
var module2 = new Module2();
module1.start();
module2.start();
});
//module1.js
define(['lib/underscore'],
function ( _) {
function Module1() {
this.start = function () {
console.log('m1 started');
};
}
return Module1;
});
//module2.js
define(['lib/underscore', 'modules/module3'],
function (_, Module3) {
function Module2() {
this.start = function () {
console.log('m2 started..starting m3 from m2');
var module3 = new Module3();
module3.start();
};
}
return Module2;
});
//module3
define([
'underscore'],
function (_) {
function Module3() {
this.start = function () {
console.log('m3 started');
};
}
return Module3;
});
//index.html
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<title></title>
</head>
<body>
<div id="main"></div>
<script data-main="scripts/main-built" src="scripts/lib/require.js"></script>
</body>
</html>
801
I found my problem. The 'main-built.js' has to be 'main.js' or in main-built the module name needs to be changed from 'main' to 'main-built'.
57
Here are two other ideas if you can't make the module name (in our case it's portal/main) the same as the file name (which is portal/main.js).
Remove the module name completely from the startup define() call. This makes it the default entry point for the document. The problem here is the optimizer isn't consistent about it's usage of " and ' depending on what command line arguments are used.
Add something like require(["startup module name"]) as the last line of the built file. This will execute immediately when the script is loaded and call into the first module of your liking. This turned out to be really easy to automate into the build script and fixed the problem for us.
32
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
