RequireJs Optimizer minifies to one file but doesn't start the main-built

6
votes

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>
3
requirejs

3 Answers

4
votes

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'.

4
votes

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.

0
votes

From Thupten's solution, a way to automate this replacement in main-built.js is to run this from the command line:

After

node r.js -o build.js

run

sed -i -- 's/define("main/define("main-built/g' main/js/Main.min.js