Support for Webpack + CommonJS Package Manager

[benoror]

Motivation

Hi!

I'm in the process of refactoring an app to support modern JS tooling like NPM-only, Webpack & ES6.

Code Change

A small change is needed to support CommonJS.

/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
  module.exports = 'angular-md5';
}

• Source: ui-router release
• Or: UMD (Universal Module Definition)

  Working Examples

I have done other PRs for some of my dependencies:

• https://github.com/wix/angular-tree-control/pull/152
• https://github.com/gdi2290/angular-md5/issues/8
  • https://github.com/gdi2290/angular-md5/pull/9
• https://github.com/muratcorlu/angular-urlify/pull/1
• https://github.com/tarkanlar/Angular-Urlify/pull/1

  Sources

• Using Angular 1.x With ES6 and Webpack by Jesus Rodriguez
• Webpack & Angular by Shawn McKay
• Angular and Webpack for Modular Applications by @kentcdodds
• NPM for Everything

[benoror]

I have successfully added CommonJS support to this module :smile: https://github.com/benoror/angular-color-picker/commit/2142f4129c5222a7406934b98ec4add9d599bc31

I can do this now:

import colorpicker from 'angular-color-picker/angularjs-color-picker.js';
import 'angular-color-picker/angularjs-color-picker.css';
/** ... **/
export default angular.module('app.xyz', [
    colorpicker 
  ])
  .name;

But ... unfortunately I have issues with TinyColor, since it places the tinycolor function in the global scope

[benoror]

Got it! I had to shim the module with imports-loader:

import tinycolor from 'tinycolor2';
import colorpicker from 'imports?tinycolor=tinycolor2!angular-color-picker/angularjs-color-picker.js';
import 'angular-color-picker/angularjs-color-picker.css';

*Source: http://webpack.github.io/docs/shimming-modules.html#imports-loader