Search code examples
browserifyrangy

How can I bundle Rangy along with additional modules?


Rangy is shipped as a core library, rangy-core.js, along with a set of optional modules built in separate files (e.g. rangy-serializer.js). I'm trying to figure out the best way to bundle rangy-core plus the modules that I require as a single file.

Background:

I'm creating a bit of Javascript that gets loaded into 3rd party sites. The first thing I do when I get loaded is pull down my additional dependencies (jQuery, Ractive, Rangy). The number of network requests that I kick off is a concern, so I'd like to avoid pulling down each piece of Rangy separately.

What I've tried:

1) Manually loading . Currently, I insert the script tag to pull down rangy-core.js and then when that's loaded I insert tags to pull down the additional modules. This works but it results in 4 network requests. Something like this:

function loadRangy() {
    // loadScript inserts a script tag and then calls
    // back to a function when the script is loaded
    loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.min.js', function() {
        loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-classapplier.min.js');
        loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-textrange.min.js');
        loadScript('//cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-serializer.min.js');
    });

2) Browserify. I've tried using Browserify to combine these 4 scripts into one. I'm probably doing this wrong, but what I tried is simply:

browserify rangy-*.js -o rangy-combined.js

This blows up with:

Error: Cannot find module 'rangy' from '/Users/foo/bar/rangy/1.3.0'
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
at ondir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at Object.oncomplete (fs.js:107:15)

Solution

  • I'm not sure if it's the recommended/best approach, but I've found that I can simply concatenate the files and everything seems to work (as long as I put rangy-core first). Using Grunt, it looks like this:

    /*global module:false*/
    module.exports = function(grunt) {
    
        // Project configuration.
        grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),
    
            concat: {
                rangy: {
                    src: [ '../rangy/1.3.0/uncompressed/rangy-core.js', '../rangy/1.3.0/uncompressed/*.js' ],
                    dest: ‘../lib/rangy-combined.js’
                }
            }
        });
    
        grunt.loadNpmTasks('grunt-contrib-concat');
    
        grunt.registerTask('rangy', [ 'concat:rangy' ]);
    
    };