Search code examples
javascriptrequirejsgruntjsamd

How to create require.js package using grunt


I've build a js library that I'd like to package as an AMD module using grunt. There are other tasks that concatenate the library file, so I'd have the non-AMD module as a start.

This is how the Gruntfile looks like:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      all: {
        options: {
          separator: '\n\n',
          stripBanners: true,
          banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
            '<%= grunt.template.today("yyyy-mm-dd") %> */\n\n'
        },
        files: {
          'dist/<%= pkg.name %>.js': ['src/file1.js', 'src/file2.js'], // this works
          'dist/<%= pkg.name %>.amd.js': ['src/file1.js', 'src/file2.js'] // this is meant to create the AMD version of the library
        }
      }
    }
 });
 grunt.registerTask('default', ['concat']);
};

The resulting file (for target library.amd.js) is meant to contain the content of library.js including the define(..., ..., ...) part of require.js:

define('library', ['dependency1', 'dependency2'], function(dep1, dep2) {
  // content of library.js here
});

How could I go about doing this? I thought about adding a header.js (for define('library...) and footer.js (for });) to the build sources of the AMD target, but was hoping there's a more elegant solution. I also looked at grunt templates, but couldn't find a way of including complete files into a template.


Solution

  • You can use grunt-umd to wrap your files in the Universal Module Definition

    Many libraries concat a header and footer file in the build as you describe. An example of this is snap.svg (see amd-banner.js, and amd-footer.js, and their gruntfile.js)