在解析下一个导入的依赖项之前等待导入

Question

我正在使用 JSPM/SystemJS/BabelJS.

将一些代码转换为 ES6 语法

我有以下内容：

// 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 {};

这段代码输出bazfoobarapplication: {}.

我想输出：foo bar baz application: {} 这样 Cocktail.patch 在 [= 中的任何代码之前就是运行 21=]

我可以通过将我的代码重写为：

// 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 {};

但是，这感觉很复杂而且不正确。它显式地利用 SystemJS 而不是 ES6 import/export 语法。在使用 ES6 语法解析 application.js 之前如何等待？

Answer 1

ES2015 (AKA ES6) 导入静态分析。它们不在 JavaScript 代码的标准流程中执行，而是在执行任何导入代码之前进行分析和执行。

使用 System.import 进行导入 "dynamic" 并在运行时发生，从而允许您控制事件的实际时间/顺序。

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

导入将按出现顺序加载，您将获得所需的结果

在解析下一个导入的依赖项之前等待导入

Wait for import before parsing next import's dependencies

import

ecmascript-6

systemjs