How to distribute your AngularJS module – Kent C. Dodds – Medium

  • Step 1Create a dist directory where you place a file that ships everything you need to use the module (unminified).
  • This makes it so when I `require(‘your-library’)` it resolves to that file.Step 2Use UMD to wrap your module (definitely recommend doing this as part of your build).
  • 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.
  • (Check my echo library for an example of how to build to UMD with webpack).
  • It’s very easy: 4Put it up on http://ngmodules.org/ because we want to know about it :-)Step 5Switch your project to webpack, and use ES6, because it’ll set you free 🙂

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…

@Jonas_Pauthier: “How to distribute your AngularJS module” by @kentcdodds

Thanks for it. Found the info I needed for a PR. (1/2)

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)

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.

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).

Publish to npm! Please! It’s very easy: https://gist.github.com/coolaj86/1318304

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!

How to distribute your AngularJS module – Kent C. Dodds – Medium

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.