0

I've been working with RequireJS for a bit lately but I am brand new to the optimizer and I am trying to add it into my build steps but I am running into an issue. After it runs and merges my JS files into one, the body of my "main" no longer executes (worked fine prior to optimizing). All of the dependency JS loads correctly but the actual code inside of my main define() does not (even though I can see it in the final output file. Here is what I mean:

Assuming simplified version of my main.js:

console.log("This statement outputs to console");
define(["jquery", "modernizr", "jquery.joyride"], function($) {
    console.log("This statement does not");
}

As I mentioned I will see jquery, modernizer, joyride and both console.log() statements in inline in the output file so I believe it is getting generated correctly. My guess is that it has to do with my require config:

This is simplified version of my app.js:

requirejs.config({
    "baseUrl": "/assets/js",
    "paths": {
        "jquery": "jquery"
    },
    "shim": {
        "jquery.joyride": ["jquery"]
    }
});

requirejs(["app/main"]);

My assumption is that the second requirejs() call is not getting executed. Is that possible? What would cause that to happen and what is the proper fix?

Essentially my optimized version of main.js looks something like the following:

(function(e,t){ ..jquery code.. };

define("jquery.joyride", function(){});
(function(a){ ...code here... });

console.log("This statement outputs to console");
define('main',["jquery", "modernizr", "jquery.joyride"], function($) {
    console.log("This statement does not");
};

Here is by build config:

({
    appDir: '../../',
    baseUrl: "assets/js",
    mainConfigFile: '../../assets/js/app.js',
    dir: '../../../BUILD/',
    optimizeCss: 'default',
    modules: [
        {
            name: "main"
        }
    ],
    removeCombined: true,
    preserveLicenseComments: false,
    optimize: 'none' // I Disabled this to help me try and debug
})

Also it it helps, this is the line I'm using to include my JS (same exact line boht before and after I optimize the file):

<script data-main="/assets/js/app" src="/assets/js/require.js"></script>
Andrew.S
  • 169
  • 12
  • could you post the config you're using with r.js (the optimizer) as well plz. – Maurice Jan 28 '14 at 04:33
  • I have updated my post above with the config. Can't believe I forgot to include that originally.. – Andrew.S Jan 28 '14 at 04:40
  • in your r.js config file, change ```mainConfigFile``` to point to app.js in place of main.js – Maurice Jan 28 '14 at 04:54
  • Whoops, thats a bit of a no brainer mistake. That being said, after changing it I still get the same result. All of the code is in the optimized main.js but the part inside the define('main') block doesn't actually execute. – Andrew.S Jan 28 '14 at 05:05
  • Interestingly, if I go into my optimized file and change: `define('main',["jquery"...` to `define(["jquery"` it works then (well I see other issues but it actually executes then. – Andrew.S Jan 28 '14 at 05:21
  • It would be worth editing your question to incorporate changes made due to comments or answers that *are* helpful but don't fix the whole problem. I was about to point out ``mainConfigFile`` and then realized that morticus did it already. – Louis Jan 28 '14 at 11:30

1 Answers1

0

so by looking closer at the code you've shared above... the issue is that the optimized version of main.js is not adding the proper module name (define("main"[ should be define("app/main"[. I suspect this has to do with one of 2 things:

  1. wrong module name in the r.js config file
  2. improper module reference in your app.js

first, to test/prove my assumption: manualy edit the optimized version of main.js to match what I mentioned above ("app/main" in place of just "main"). if that works, then try these things (one at a time, not at the same time):

  1. for addressing #1, in your r.js config file... change name:"main" to name:"app/main"
  2. for #2, in your app.js, change requirejs(["app/main"]); to requirejs(["main"]);
Maurice
  • 1,223
  • 14
  • 21
  • Ok so I tried what you listed above and the manual update fixed the issue (while introducing others that I'll have to debug :) ). However, neither of the other 2 changes you listed were able to fix the issue. I'm guessing the issue I have stems from how I have my baseURL and path values set in my app.js but I could be wrong. – Andrew.S Jan 28 '14 at 05:37
  • Try removing ```baseUrl``` and ```appDir``` from the r.js config. I just noticed that the ```baseUrl``` in there is different than the one you defined in app.js – Maurice Jan 28 '14 at 05:44
  • That causes it to fail. The values are different because the r.js config is providing values relative to where my actual config file is whereas the app.js one is providing details relative to where the app.js is. Do they need to be in the same location? – Andrew.S Jan 28 '14 at 05:48
  • no, they don't need to be the same. defining a property in your r.js file will overwrite it's original value (taken from app.js) at build-time. so if you're r.js config is in a different directory that app.js, then it makes sense for them to be different. – Maurice Jan 28 '14 at 05:53
  • Thats what I figured. My app.js, require.js and all my regular js files are in `assets/js/` whereas my r.js config is in `assets/build/` – Andrew.S Jan 28 '14 at 06:00