一些代码后如何 ES6 导入（SystemJS）？

Question

我想importangular，实例化AngularJS模块，然后再导入另一个要求Angular已经实例化的文件：

import angular from 'angular';

var app = angular.module('app', []);

import 'src/app.js';

angular.element(window).ready(function(){
  angular.bootstrap(document, ['app']);
});

但是 Babel 将它编译成这个（TLDR：将所有导入提升到顶部）

System.register([], function (_export2) {
return {
    setters: [],
    execute: function () {
      System.register(['angular', 'src/app.js'], function (_export) {
        var angular, app;
        return {
          setters: [function (_angular) {
            angular = _angular.default;
          }, function (_srcAppJs) {}],
          execute: function () {
            app = angular.module('app', []);
            angular.element(window).ready(function () {
              angular.bootstrap(document, ['app']);
            });
          }
        };
      });
    }
  };
});

---

更新：@just-boris

我很清楚System.import().then。问题是 app.js 还包含 imports 文件，这些文件构成了 Angular 组件，这些文件需要实例化 module。
导入文件示例：

angular.module('app').controller( [ function () {} ] );

System.import().then 不等到依赖树 解决了，因为它没有任何意义。

System.import('app').then(function(){
    // But wait, app.js's dependencies aren't resolved!
    // The Angular components aren't loaded yet!
    // The following will throw errors:
    angular.element(window).ready(function(){
        angular.bootstrap(document, ['app']);
    });
});

Answer 1

根据设计，所有导入语句都应可用于静态分析，因此它们必须位于顶层。有关相关问题，请参阅 this answer。

如果你想在运行时加载模块，你不应该使用import。但是你可以用System.import 来代替

System.import('src/app.js').then(function() {
   // deal with app.js
});