Problems generating bundle with RequireJS

Question

I have a Typescript project:

myproject
 |
 +-src (folder)
 |  |
 |  +-main.ts
 |  +-stringHandler.ts
 |  +-disposable.ts
 +-out (folder)
 |  |
 |  +-...
 +-Gruntfile.js

In my Grunt configuration I have a 2-step task which compiles all .ts files in myproject/src/ and generates corresponding .js files into myproject/out/. So after the first step of the task is complete, I have the following:

myproject
 |
 +-out (folder)
    |
    +-main.js
    +-stringHandler.js
    +-disposable.js

Bundling

The second step of the task is generating bundle file myproject.js. I am using RequireJS for this purpose.

I have installed grunt-contrib-requirejs. The Gruntfile.js file handling the bundling task is as follows (showing only relevant parts in the file):

module.exports = function(grunt) {
  var config = {
    pkg: grunt.file.readJSON('package.json'),
    requirejs: {
      compile: {
        options: {
          baseUrl: "out",
          bundles: {
            'myproject': ['main', 'stringHandler', 'disposable']
          },
          out: 'out/myproject.js'
        }
      }
    }
  };
  grunt.initConfig(config);
  grunt.loadNpmTasks('grunt-contrib-requirejs');
  grunt.registerTask('default', ['compile', 'requirejs']);
};

When Grunt reaches requirejs, after successfully compiling the project, I get the following error:

Running "requirejs:compile" (requirejs) task { [Error: Error: Missing either a "name", "include" or "modules" option at Function.build.createConfig (C:\Users\myuser\Documents\myproject\node_modules\grunt-contrib-requirejs\node_modules\requirejs\bin\r.js:29567:19) ] originalError: [Error: Missing either a "name", "include" or "modules" option] }

I can understand there are missing parameters, but when I use name I get other errors. I guess there must be something wrong at a more generic level. What is the correct configuration format? Thanks

Butifarra Butifarra · Accepted Answer · 2015-08-07T19:18:36

This assumes main.ts is your application's entry point and that it contains a require.config section with your application dependencies (libraries and shims).

First, move the require.config section out of main.ts and into its own file, config.ts. Leave the application bootstrap code in main.ts.

Then determine where you want this optimized application code deployed. Let's assume it is to a directory named build, which is parallel to your src and out folders.

Update you Gruntfile to reflect this configuration:

requirejs: {
    compile: {
        options: {
            baseUrl: "out",
            mainConfigFile: "out/config.js",
            modules: [
                { name: "main" }
            ],
            dir: "build",
            optimize: "none" // skip compression while debugging
        }
    }
}

You can read more about each of these config options at http://requirejs.org/ but here's the basic rundown:

baseUrl: Where the source JS code lives.
mainConfigFile: Points to the config object mentioned above. It tells the plugin where the dependencies live. This obviates the need to specify and manually update the list of dependencies in two places.
modules: Is an array of application bootstraps. In this case a list of one, main.js.
dir: Where the optimized application will be generated. Note that your dependencies will also be copied here.
optimize: I left this off so you can easily debug the resulting app under ./build. Remove it when you're happy and the plugin will optimize (compress and munge) your build files.

Problems generating bundle with RequireJS

Bundling

1 Answers