ember.js - Ember CLI 中的动态模块导入

Question

我在 Ember CLI 应用程序中定义了一堆模块，每个模块都以相同的路径开始。我想将模块导入应用程序中的模块。例如，我可以写:

import post1 from 'posts/1';
import post2 from 'posts/2';
import post3 from 'posts/3';

export default Em.ObjectController.extend({
  posts: Em.A(post1, post2, post3),
});

但是，我不知道模块名称，因为它们是由预编译器动态创建/命名的。我所知道的是路径总是以相同的字符串开头。在这种情况下， posts .

有没有办法导入以特定路径开头的所有模块？例如，我该如何执行以下操作:

import posts from 'posts/*';

// or

registry['posts'].forEach(postId, i) {
  var path = 'posts/' + postId;

  import i from path;
}

我要查找和导入的每个模块都导出了一个对象。

我已经通过 ES6 module transpiler docs，但找不到太多。

Answer 1

ES6 规范不允许您使用 import 动态导入模块。关键词。所有使用模块语法的导入和导出都必须静态完成。但是，它确实提供了可用于动态导入模块的编程 API。 This article对它有一个很好的总结(以及对其余 ES6 模块的一个很好的总结)。

我的建议是将 Ember 的加载程序 API 包装在符合 ES6 的包装器中。例如，Ember-CLI 使用 require()函数来获取模块，所以你可以做这样的事情:

window.System = window.System || {};
window.System['import'] = function(moduleName) {
    return Ember.RSVP.Promise.resolve(window.require(moduleName));
}

// ...

System.import('my-app/posts/' + postNumber).then(function(postModule) {
    // ...
});

您也可以使用 Ember require()直接运行，我的方式只是在 Ember 更改其模块加载器的可能事件中保护您。