Attaching multiple JS files in a sequence brunch Phoenix

Phoenix Forum Questions / Help
1

I want to add Datatables to Phoenix project…
There are few files…
jquery.min.js
jquery.dataTables.min.js
dataTables.semanticui.min.js
semantic.min.js
I want those files to be attach to the dom on load or ready in this sequence… I have place those files into vendor/js/*files* and Also Added lines to brunch config file as

      order: {
     before: [
         "vendor/js/jquery.min.js"
         "vendor/js/bootstrap.min.js"
      ]

But it didnt work at all. Can anyone please help

And is there an VERY way to handle those things? I kind of stuck for life into such things, How to manage assets in Phoenix… (I miss rails way.)

I have added those files any where possible. Vendor, Static Vendor, just asset vendor and so many places where it could pick it

2

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.