1

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?

4

2 に答える 2

2

importは実際には式ではなく、このコードを実行する前にどのモジュールをインポートする必要があるかをコンパイラに示すだけです。varこれは、定義の仕組みに似ています。すべての変数は、そのスコープ内のすべての式の前に定義され、これはvariable hoistingと呼ばれます。

したがって、コードがインポートの前に実行されることを確認したい場合は、別のモジュールに移動できます

// 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);

インポートは出現順にロードされ、目的の結果が得られます

于 2015-08-29T23:25:01.003 に答える