How to distribute your AngularJS module
I’m converting my project to use webpack for a ton of reasons. It’s awesome. This has given me the opportunity to reflect on the relationship between angular modules and npm modules and I think I’ve determined what I believe to be the best way for angular module developers to show the npm angular developers some love. (And, I encourage you to join the promised land)
Step 1
Create a dist directory where you place a file that ships everything you need to use the module (unminified). Then set your package.json’s “main” property to this file. This makes it so when I `require(‘your-library’)` it resolves to that file.
Step 2
Use UMD to wrap your module (definitely recommend doing this as part of your build). The angular-ui-router does this (CommonJS only, and still depends on angular being global, but still, it’s great). This is very important! Here’s a simple example of a module that gives you a directive “log-when-linked” that logs out when an element is linked.
Notice the example of what this allows me to do in the README. Make sure to return export the module name! It also makes it really easy for AMD users (if you’re still into that) and it’s not any different for global namespace users. It’s really a beautiful thing. (Check my echo library for an example of how to build to UMD with webpack).
Step 3
Publish to npm! Please! It’s very easy: https://gist.github.com/coolaj86/1318304
Step 4
Put it up on http://ngmodules.org/ because we want to know about it :-)
Step 5
Switch your project to webpack, and use ES6, because it’ll set you free :-)
Thanks! Let me know what you think as a comment or on Twitter. If you have suggestions on articles or build systems or other tools on making this easier for people to do, please feel free to link to them in a comment!
Note: All this UMD pain goes away when we’re all using ES6 modules :-) Start using ES6 now and that’ll be easier too!
Edit: This is the method that the Angular team will be following for all the angular modules (see PR).
