Attaching multiple JS files in a sequence brunch Phoenix

Now I’m far from an expert on these matters but it strikes me that there may be the possibility “it didn’t work” actually means “it didn’t do what I expected it to do”. Brunch is a “module bundler” and order simply defines the compilation order into the application bundle - which is a very different concept from ordering script files in order of dependency within the markup page.

Brunch’s purpose is to support module-based javascript - rather than the “attach-your-libraries-as-globals-to-the-browser” approach that was all too prevalent during the jQuery era. To get a notion of what that means have a quick look at my recent post here.

Now as to your particular problem I recommend you have a quick look over Elixir, Phoenix Framework and Datatables.

Note how the ordering of dependencies is handled within the JS code:

import $ from "jquery"
require( 'datatables.net-bs' )( window, $ );

https://github.com/fmcgeough/datatables/blob/master/web/static/js/views/page/zips_index_view.js

while the dependencies are simply included via package.json:

"jquery": "^3.1.1",
"datatables.net": "~1.10.12",
"datatables.net-bs": "~1.10.12",
"bootstrap": "~3.3",

https://github.com/fmcgeough/datatables/blob/master/package.json

https://github.com/fmcgeough/datatables/blob/master/brunch-config.js

One of the problems could be that files like jquery.dataTables.min.js are likely structured for inclusion as a JS script file in the markup - which are not suitable for use as a module. Meanwhile the version available via npm is packaged as a module which is suitable for bundling.

If you are using a JS script library that has never been published through npm then you have to go through shenanigans like the ones I use here.