1

我正在使用 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 {};

此代码输出baz foo bar application: {}.

我想输出：foo bar baz application: {}这样Cocktail.patch在任何代码之前运行application.js

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

// 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 导入/导出语法。application.js在使用 ES6 语法解析之前如何等待？

4

2 回答 2

2

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

UsingSystem.import使导入“动态”并在运行时发生，从而允许您控制事件的实际时间/顺序。

于 2015-08-26T21:35:30.017 回答
2

import实际上不是表达式，它只是编译器的标记，在此代码运行之前应该导入哪些模块。这类似于var定义的工作方式。所有变量都在该范围内的所有表达式之前定义，这称为变量提升。

因此，如果您想确定您的代码将在导入之前运行，您可以将其移动到单独的模块中

// 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 回答