I do it by naming my .js files in the order I want. Like this:
10_foo.js
20_bar.js
30_baz.js
then I don't need to specify them one by one, I just do as normal:
{% javascripts '@MyBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
and they are loaded in order.
Now for the main libraries that should be available in every page, I use a base.html.twig template in the app/Resources/view that gets extended in every page with this code in it:
before <body>
tag:
{% stylesheets '@MyMainBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% block stylesheets %}{% endblock %}
and near the end of <body>
tag:
{% javascripts '@MyMainBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% block javascripts %}{% endblock %}
so I leave the main js libraries (with the naming convention I mentioned above) in the "MainBundle" and also configured in the base template. This way they are loaded in every page and I have the possibility of extending CSS and javascript files with some files specific to that page like this:
{% extends '::base.html.twig' %}
{% block stylesheets %}
{% stylesheets '@MySpecificBundle/Resources/public/css/*' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% block body %}
... < whatever > ...
{% endblock %}
{% block javascripts %}
{{ parent() }}
{% javascripts '@MySpecificBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}