Support browserify

[cburgmer]

This issue has already been mentioned in #22, however there still seems to be work to do.

The following three things should be tackled for the original packaging to work together with browserify:

• Node.js canvas dependency should be optional (npm package for browser #22) ✓
• Canvas dependency resolution needs to fallback to the browser support in a require-style environment (Support module system for browser environment #28)
• Packaging with browserify should work without the need to resolve the canvas dependency.

The latter can be solved by the following solutions:

1. Tell browserify to exclude the canvas dependency. The following is a hacky solution that works for me:

   $ npm install browserify
   $ touch canvasShim.js
   $ ./node_modules/.bin/browserify -e js/imagediff.js -s imagediff -r ./canvasShim.js:canvas --exclude ./canvasShim.js -o imagediff.browserified.js
   

   Or in human language: Package imagediff (-e) as a standalone package (-s) by replacing the canvas dependency with our mock (-r) that you shall not include (--exclude).

2. Use canvas-browserify to always provide a Node.js package, but one that actually works in the browser.

   1. Either, completely remove the homegrown getCanvas() method, thus delegating this to canvas-browserify. This will however sacrifice the ability of the produced artifact to be usable in the browser out-of-the-box.
   2. Or, keep the getCanvas() implementation, but in the case of the browserify bundle use the implementation provided by canvas-browserify. We will produce code duplication, but then all cases should be covered.

3. Ask around for other solutions.

I would currently favour 2.ii.

[ghost]

You can add a browser field to package.json that will override local require calls with custom versions. For example

{
  "browser": {
    "canvas": "./canvas.js"
  }
}

and then in canvas.js:

module.exports = function (w, h) {
  var elem = document.createElement('canvas');
  elem.width = w;
  elem.height = h;
  return elem;
}

[cburgmer]

Thanks. I didn't know about the per-file override.

That could refine options 2.i. and 2.ii.

[cesutherland]

👍