How do you keep the order of AngularJS files when transpiling with BabelJS

Question

I've started to play around with using NPM Scripts and BabelJS to transpile my ES2015 AngularJS project. The problem is that the concatenated order is not correct and causes nomod errors.

Given this directory structure:

MyApp
  +- src
  |   +- dashboard
  |   |   +- search-bar
  |   |   |   +- search-bar.directive.js
  |   |   |   +- search-bar.service.js
  |   |   |   +- search-bar.spec.js
  |   |   +- dashboard.module.js
  +- dist
  |   +- js
  |   |   +- dashboard.js

Ideally, dashboard.module.js should be the first file because that is where the actual dashboard module is created, followed by everything in /search-bar which actually doesn't require any order at all. The search bar is a feature/component, not a new module and is all part of dashboard .

The problem seems to be that simply running BabelJS will just concatenate all the files together using the same structure as the filesystem does.

babel ./src/dashboard/**/*.js -o ./dist/js/dashboard.js

There are also weird things when messing with the wildcards to try make sure all files are captured.

How can I process dashboard.js first before any of the other components?

Answer 1

It turns out you can specify many globs as input files.

Try using this command:

babel ./src/dashboard/*.js ./src/dashboard/**/ -o ./dist/js/dashboard.js

This will first process any .js immediately inside of /dashboard followed by the rest of the directory.

Gotcha: This will only really work as long as you only have the one file inside of the /dashboard root. If you were to add dashboard.config.js or any other file, then this would process those files in that filesystem order. Unfortunately, dashboard.config.js comes before dashboard.js so your problem will continue. :(

Also, if you have other files in /dashboard root or you have other kinds of .js that you don't want to be included, you'll need to ignore them.

Try:

babel ./src/dashboard/**/*.js ./src/dashboard/**/ --ignore *.spec.js --ignore *.conf.js -o ./dist/js/dashboard.js

This will put things in the right order and also skip any karma.config.js or search-bar.service.spec.js files you may put in there. I assume that you don't want those actually being used in production.