3

I'm making use of RequireJs, and I'm having trouble with the build.

My structure is

webroot
  css
    /* css here */
  files
  img
  js
    emails
      verify.js
    lib
      jquery-1.8.3.min.js
      jquery-ui.min.js
      jquery.ui.selectmenu.js
      modernizr.js
      require.js
    orders
      form.js
    common.js
  js-build
    /* expected build output here */
  js-tools
    app.build.js

This is a part of a CakePHP project, but the webroot is where the actual webroot of the web server will be.

node and r.js.cmd are both on my path, so I haven't included it in the js-tools directory.

When accessing the default page, the is /, but it could also appear as /orders/form. For this reason, relative Urls to the JS is an issue.

When I load the JS, I'm using

<script type="text/javascript" src="/js/lib/require.js"></script>
<script type="text/javascript">
//<![CDATA[
require(['/js/common.js'], function(common){
    require(['orders/form']);
});

//]]>
</script>

This is taken from https://github.com/requirejs/example-multipage-shim.

My common.js is

requirejs.config({
    "baseUrl": "/js/lib",
    "paths": {
        "orders": "../orders",
        "emails": "../emails",
        "jquery": [
            "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min",
            "jquery-1.8.3.min"
        ],
        "jquery-ui": [
            "//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min",
            "jquery-ui.min"
        ]
    },
    "shim": {
        "jquery.ui.selectmenu": ["jquery", "jquery-ui"]
    }
});

As it stands, this works when working with unoptimized code. The important feature is that js is referenced with an absolute URL, is it can be picked up by the code from either /, or /orders/form.

My app.build.js is

({
    appDir: '..', /* relative to app.build.js */
    mainConfigFile: '../js/common.js', /* relative to app.build.js */
    baseUrl: 'js/lib', /* relative to current directory */
    dir: '../js-build', /* relative to app.build.js */
    optimize: 'uglify2',
    paths: {
        "jquery": "empty:",
        "jquery-ui": "empty:",
        "jquery.ui.selectmenu": "empty:",
        "common": "../common",
        "orders": "../orders",
        "emails": "../emails"
    },
    modules: [
        {
            name: 'common',
            include: [
                'modernizr'
            ],
            exclude: ['jquery-1.8.3.min', 'jquery-ui.min', 'jquery.ui.selectmenu']
        },
        {
            name: 'orders/form',
            exclude: ['common', 'jquery.ui.selectmenu']
        },
        {
            name: 'emails/verify',
            exclude: ['common', 'jquery.ui.selectmenu']
        }
     ]
})

When optimization runs as r.js.cmd -o js-tools\app.build.js from the webroot, I get a js-build directory with a copy of the whole webroot directory, optimized. Although not ideal (I wanted to limit it to just the js directory getting optimized), I can use my Ant driven build script to copy the contents of the js-build\js directory to the correct location.

When I run the build from the command line, the generated common.js, orders/form.js and emails/verify.js all exclude jquery.ui.selectmenu. common.js has modernizr included, as well as the header from the same lib. form.js and verify.js also exclude jquery.ui.selectmenu, and are devoid of any headers.

However, when I run from my Ant script, orders/form.js and emails/verify.js include jquery.ui.selectmenu and modernizr, even though I've given specific instruction for common and jquery.ui.selectmenu to be excluded.

I've excluded jquery.ui.selectmenu, because the particular version I am working with is written the the following form, and the browser has an issue with the end jQuery variable not being available. By excluding jquery.ui.selectmenu, I can attempt to load it separately, as though it came from a CDN.

(function($, undefined) {
    $.widget("ui.selectmenu", {...
    });
}( jQuery ));

So, my issue is, how come the same app.build.js is resulting in different output?

1 Answer 1

4

When dealing with relative paths you might need to include a "." at the beginning of the path string (to specify that you want to go from the current path). I ran into this issue recently while testing out r.js on grunt. I had set my baseUrl to "/" initially when it should've been "."

In your case, your baseUrl is set to "js/lib" - perhaps try ".js/lib"

It's a little weird since the error message I got seemed to have the correct base path as well as the relative path, but r.js was still unable to locate the file.

This question is pretty old but I see it has a bunch of views, so I figured I'd put this on here as it might help someone out there.

Sign up to request clarification or add additional context in comments.

1 Comment

perhaps you mean "./js/lib"?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.