Home/ Questions/Q 9128075
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T07:25:40+00:00

I’m beginning to evaluate javascript module tools like RequireJS for javascript modularization. This seems

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    • 0