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 recompile all of the js files into mylib-<version>.js whenever I change one of the dependent files.

My app is distributed with both html and javascript files, and in production, I would like to use the compiled version of the javascript file.

So in development, my html file might look something like

<html>
  <head>
    <script data-main="scripts/main" src="scripts/require.js"></script>
  </head>
</html>

But in production, I would expect it to look more like

<html>
  <head>
    <script src="mylib-1.0.js"></script>
  </head>
</html>

I wouldn't think it production that there should be any need to reference requirejs if I am distributing a compiled file.

Is there a way to do this without having to manually change my html files before I distribute the app?

asgoth asgoth · Accepted Answer · 2013-01-14T20:31:01

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).

Javascript requirejs in development but compiled in production

2 Answers