title: Wait for import before parsing next import's dependencies
body: <p>I am converting some code to ES6 syntax using JSPM/SystemJS/BabelJS.</p>
  
  <p>I have the following:</p>
  
  <pre><code>// 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 {};
  </code></pre>
  
  <p>This code outputs <code>baz</code> <code>foo</code> <code>bar</code> <code>application: {}</code>.</p>
  
  <p>I would like to output: <code>foo</code> <code>bar</code> <code>baz</code> <code>application: {}</code> such that <code>Cocktail.patch</code> is ran before any code in <code>application.js</code></p>
  
  <p>I am able to achieve this by re-writing my code as:</p>
  
  <pre><code>// 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 {};
  </code></pre>
  
  <p>However, this feels convoluted and incorrect. It's leveraging SystemJS explicitly rather than ES6 import/export syntax. How can I wait before parsing <code>application.js</code> using ES6 syntax?</p>