It has been a while since I’ve touched my Angular Blackjack project. When I first started working on it, I created a build process that used gulp-concat to simply merge all our application files into one. Let’s bring our application into 2015, ES2015 that is, with a modular loading system.
For this exercise I decided to use Webpack. I could’ve easily used jspm or browserify, but Kent C. Dodds‘s series on Egghead.io was easy to follow and very informative: https://egghead.io/series/angular-and-webpack-for-modular-applications
For a quick TL;DR, you can see the pull request of all the changes made: https://github.com/adamweeks/angular-blackjack/pull/2/files?w=1
I’m just going to give a general overview of what I worked on and changed instead of the detailed step by step this post. The three main things I changed were:
- Installing and configuring webpack
- Bower to NPM
- Javascript File Changes
- Index changes
The first thing is to install webpack and all of the loaders for the different file types. I’ve also decided to use the ES6 style “import from” module loading syntax, so we’ll need to install babel as well. Check out package.json and webpack.config.js for these changes.
Since webpack plays more nicely with npm modules over bower modules, I’ve switch my repo’s dependencies to npm. I also added a “start” and a “build” script to the package.json.
Next, I’ve gone through and converted all of my *.module.js files into index.js that export the angular modules. I’ve also moved all of the module registrations of services, controllers, and directives to the index.js files. Heres our card/index.js file for example:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import angular from 'angular'; | |
| import BlackjackCard from './card.directive'; | |
| import CardService from './card.service'; | |
| import BlackjackHand from './card.hand.directive'; | |
| let cardModule = angular.module('blackjack.card', []); | |
| cardModule | |
| .directive('blackjackCard', BlackjackCard) | |
| .factory('CardService', CardService) | |
| .directive('blackjackHand', BlackjackHand); | |
| export default cardModule; |
The actual implementations are simply exported at the end of the file.
Finally, we’ve had webpack package all of our project files and requirements into bundle.js, so we can remove all of our script and link tags out of the index.html file.
Update: I’m not 100% happy with the way bootstrap is required because it seems to be bloating my bundle file with lots of unnecessary fonts and images. I’ll be looking into it in the future.
Adam Weeks 