Webpack with angular 1.x and ES5
I typically have a feature.module.js file which has my module definition and requires all of the directives / services contained within the module. Also has the external dependancies.
/* module.js */angular.module('my.module',['dependancy1', 'dependancy2']);//External librariesrequire('./dependancy1.module.js');require('./dependancy2.module.js');//Internal componentsrequire('./thing.directive');require('./thing.service'; /* service.js */angular.module('my.module') .directive('yourDir', function myDir(){...});
I'm dealing with the same problem now. And I found something that works (work in progress, but at least I can see progress). My steps:
- Install yeoman
- Run this angular-webpack generator. Select 'ES5' when asked (the other option is 'ES2015', which I guess is the same that 'ES6')
- Start modifying the automatically generated boilerplate with your Angular code
Yes, you still need to learn about gulp and sass, but at least you can run a simple AngularJS app using the old ES5 syntax, and start modifying it.
I'm probably blogging about this. So, I'll update this answer then.
I tend to do this:
app.js:
require('/any/angular/deps');var subModule = require('/some/sub/module');var app = angular.module('myApp', []);// pass the app module in sub modules to allow them to define their own configsubModule.configure(app);/subModule/module.js:
var someSubDirective = require('./subDir/directive');export function configure(app) { someSubDirective.configure(app);}/subModule/subDir/directive.js:
export function configure(app) { app.directive('myDir', myDir);}function myDir() {}My idea is to let all sub modules handle their own configuration, so declaring config or constant, factories or providers. Letting this then bubble up to the app.js. This means its really easy to delete a folder from your structure, because it is one line removal from it's parent module.
This also makes relevant file paths a lot shorter and easier to handle.