Wait for import before parsing next import's dependencies - import

Question

I am converting some code to ES6 syntax using JSPM/SystemJS/BabelJS.
I have the following:
// main.js:
console.log('foo');
import * as Backbone from 'backbone';
import * as Cocktail from 'backbone.cocktail';
Cocktail.patch(Backbone);
console.log('bar');
import Application from 'background/application';
console.log('application:', Application);
// application.js:
console.log('baz');
export default {};
This code outputs baz foo bar application: {}.
I would like to output: foo bar baz application: {} such that Cocktail.patch is ran before any code in application.js
I am able to achieve this by re-writing my code as:
// main.js:
console.log('foo');
import * as Backbone from 'backbone';
import * as Cocktail from 'backbone.cocktail';
Cocktail.patch(Backbone);
console.log('bar');
System.import('background/application').then(function(Application){
console.log('application:', Application.default);
});
// application.js:
console.log('baz');
export default {};
However, this feels convoluted and incorrect. It's leveraging SystemJS explicitly rather than ES6 import/export syntax. How can I wait before parsing application.js using ES6 syntax?

Answer 1

import is not actually an expression, it is just mark for compiler, which modules should be imported before this code will run. This is similar to how var definition works. All variables is defined before all expressions in that scope, this is named variable hoisting.
So if you want to be sure, that your code will run before imports, you can move it into separate module
// setup.js
console.log('foo');
// backbone-patch.js
import * as Backbone from 'backbone';
import * as Cocktail from 'backbone.cocktail';
Cocktail.patch(Backbone);
console.log('bar');
// application.js:
console.log('baz');
export default {};
// main.js:
import './setup';
import './backbone-patch'
import Application from './application';
console.log('application:', Application);
Imports will be loaded in order of appearance and you will get the desired result

Answer 2

ES2015 (AKA ES6) imports are statically analyzed. They are not executed in the standard flow of a JavaScript code, but are rather analyzed and executed before any of the importing code is executed.
Using System.import makes the import "dynamic" and occur at runtime, thus allowing you to control the actual timing / order of events.