Javascript requirejs in development but compiled in production

Question

I\'m beginning to evaluate javascript module tools like RequireJS for javascript modularization. This seems useful, especially during development, so I don\'t need to recomp

Answer 1

RequireJs has an optimization tool, which can help you to minify and concatenate your modules. It has a lot of options, and can be difficult to use, but it gets easier with a build tool like GruntJs or (especially) Yeoman, which uses GruntJs to build.

In both you can use the rjs task (which optimizes modules), but again Yeoman is a bit easier since it has generators which will configure it already for you:

// usemin handler should point to the file containing
// the usemin blocks to be parsed
'usemin-handler': {
  html: 'index.html'
},
// rjs configuration. You don't necessarily need to specify the typical
// `path` configuration, the rjs task will parse these values from your
// main module, using http://requirejs.org/docs/optimization.html#mainConfigFile
//
// name / out / mainConfig file should be used. You can let it blank if
// you're using usemin-handler to parse rjs config from markup (default
// setup)
rjs: {
  // no minification, is done by the min task
  optimize: 'none',
  baseUrl: './scripts',
  wrap: true,
  name: 'main'
},

In the index.html you just use a comment line to specify which js files should be minified/concatenated to which output file:

In the example above, the modules will be concatenated to ONE file, named amd-app.js.

Edit:

This will be done by executing grunt from the command line. This will start a lot of useful tasks, which will build the project in a dist folder, but again this is highly adaptable.

The resulting index.html file (in dist) has only (if you want) one javascript file:

My advice: use Yeoman to make life easier (at least for handling minification/concatenation).