Question

Currently I’m building a JS library that can attach to and interacts with to any HTML5 Canvas element context.

However, the project is starting to get extensive with lots of files and thousands of lines of code. Each file represents a different object/module. Each file is currently laid out like this, and I’d really like to preserve some semblance of this style:

Object = function() { 
    // constructor
}

Object.prototype.method1 = function() {
    // Logic
}

Object.prototype.method2 = function() {}; // .... etc

And in the development version of the HTML I have a bajillion script tags (one for each file) that need to be in a precise order (for dependencies). I realize that this is very inefficient, and not very maintainable. But I’m not sure what is the best direction to go in to try and make my project easier to build and maintain. Port to NodeJS for the convenience of the tools and CommonJS module system? Convert to RequireJS? I’m just starting to read about Grunt, is that useful for my situation?

Improving my organization and introducing some sort of build system are both things I’ve put off doing for a while. And man do I regret it now.

Answer 1

You need a module system.

RequireJS, with the RequireJS optimizer, is the canonical solution here. You can use browserify if you’re more Node.js-leaning, or use the cjsTranslate feature of the RequireJS optimizer if you dislike the AMD cruft (define(function (require, exports, module) { ... });)—possibly in conjunction with Cajon in development.

---

A build tool, like Grunt, is not the most important factor here. That is useful mainly when you have multiple build steps—e.g., run the RequireJS optimizer, and then compile your SASS to raw CSS, then concatenate the CSS, then turn your images into sprites, then… etc.