延迟模块加载如何在ES6中工作

Question

我如何懒洋洋地加载 ES6模块？通过懒惰,我的意思是我不希望实际加载的模块不需要.例如,这是我可以用RequireJS做的事情:

function someEventHandler() {
    var SomeModule = require('some-module'),
        module = new SomeModule();
    // ...
}

使用ES6导入似乎无法实现同样的功能:

// Doesn't appear to be valid...
function someEventHandler() {
    import SomeModule from 'some-module';
    var module = new SomeModule();
    // ...
}

有没有可行的技术只在需要时使用ES6模块引入依赖关系？或者是跟踪完整依赖关系图并预先获取所有内容的唯一途径？

Answer 1

该import语句只能在文件的最顶层工作,并且会加载所有文件.这主要是为了避免循环依赖的潜在问题.

还有一种方法可以进行异步加载; 但是规范似乎还没有最终确定.该ES6模块加载填充工具包采用了一种名为方法System.import(moduleName)返回一个承诺,最终的规范很可能类似于:

function someEventHandler() {
    System.import('some-module').then((SomeModule) => {
        var module = new SomeModule();
        // ...
    })
}

Answer 2

ES6 中延迟加载 jQuery 的示例：

import('jquery').then((jquery) => {
     // Because jquery is the module, here is the new syntax for using this 
          window.$ = jquery.default;
          window.$('#id');
});