Search code examples
javascriptnode.jsrequirejsamdr.js

File produced by r.js powered Node build script doesn't appear to do anything


The source

My src has the following structure :

src
|-- index.html
|-- js
|    |-- amdconfig.js
|    |-- main.js
|    |-- ...
|-- lib
     |-- require
     |    |-- require.js
     |-- d3
     |    |-- d3.js
     |-- luciad
          |-- ...

My index.html contains the following code :

<script src="./lib/requirejs/require.js" type="text/javascript"></script><!-- require.js -->
<script src="./js/amdconfig.js" type="text/javascript"></script><!-- require.js config -->
<script type="text/javascript">
    require(["app/js/main"]); /* main module */
</script>

My amdconfig.js file contains the following code :

(function(configure, app) {
  var lib = [app, "lib"].join("/");
  configure({
    baseUrl : app,
    urlArgs : "bust=" + (new Date()).getTime(),
    packages : [{
      name : "requirejs",
      location : [lib, "requirejs"].join("/")
    }, {
      name : "luciad",
      location : [lib, "luciad"].join("/")
    }, {
      name : "d3",
      location : [lib, "d3"].join("/")
    }, {
      name : "app",
      location : app
    }],
    cache : {}
  })
})(
  require.config ? require.config /* RequireJS */ : require, /* Dojo */
  '.'
)

My build script

I have a build script with the following structure :

builder
|-- build.js
|-- package.json

If has the following code :

require('requirejs').optimize({
  baseUrl: '../src',
  paths: {
    main: 'main',
    requirejs : './lib/requirejs',
    luciad : './lib/luciad',
    d3 : './lib/d3',
    app : './'
  },
  name: 'js/main',
  out : '../dist/main.js',
  optimize: "uglify2",
  uglify2: {
    output: {
      beautify: false
    },
    compress: {},
    warnings: true,
    mangle: true
  }
}, function (buildResponse) {
  console.log(buildResponse);
});

My problem

The build script does produce a minified main.js file and outputs the list of included files in the console, as expected.

However, when I replace the main.js of my src with the main.js I just generated, nothing happens. My app doesn't start and I'm not getting any errors.

What am I missing here?


Note

If I don't minify my code, I get the same behavior.

The generated file consists of a whole bunch of modules in this format :

define('namespaced/path',["dependency1", "dependency2"], function(a,b){...});

I suppose that is the expected format...


Solution

  • I managed to figure out what caused my issue.

    The produced output looked something this :

    define('luciad/util/create',[],function(){...});
    define('luciad/error/_createError',["../util/create"],function(a){...});
    define('luciad/error/ProgrammingError',["./_createError"],function(a){...)});
    ...
    define('js/main',[...],function(...){...});
    

    Note the last line. There, my main module is called js/main. However, my main module is called in my HTML file like this :

    require(["app/js/main"]);
    

    So, what happened, was that require(["app/js/main"]) failed silently because it couldn't find a module named app/js/main.

    The solution was surprisingly simple. All I had to do, was rename the name parameter from js/main to app/js/main. Now, everything works as expected.

    I don't know how I could have missed this, but I guess the silent fail of require(["app/js/main"]) didn't exactly help.