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)
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' ]);
};