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:

    <!-- build:js scripts/amd-app.js -->
    <script data-main="scripts/main" src="scripts/vendor/require.js"></script>
    <!-- endbuild -->

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:

<script src="scripts/15964141.amd-app.js"></script>

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

Answer 2

First you have to compile your depency tree into one file using the r compiler. After that you can a striped down AMD loader like almond. At least you have to find a way to change the url in your index html.

Take a look at gruntjs which can automatize the whole thing, there a bunch task to like usemin that helps you with the process.