How do I change the javascript loading order

Question

I am using mixitup.js for my custom module. But it gives error when firing because it needs to load the jQuery before loading the mixitup.js. But my jQuery files are in my site folder which are loading in the end of the page. Is there way to load my mixitup.js in the end of the page. mixitup.js should be in my custom module too.

Answer 1

To add a js library to the header, define your library in my_module.libraries.yml with the header: true property.

my_library:
  header: true
  etc ...

Any dependencies defined for your library will always be loaded before your library whether loading your js in the header or footer.

See Asset loading order section here.

Answer 2

As mentionned above, one way to control the order is to declare in your library the dependencies of other libraries containing the js you want to be loaded before

agenda:
  version: 1.x
  css:
    component:
      css/agenda.css: {}
  js:
    js/agenda.js: {}
  dependencies:
    - fullcalendar_view/fullcalendar