Ember CLI中动态模块导入 [英] Dynamic module import in Ember CLI

问题描述

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

 从'posts / 1'导入post1; 
从'posts / 2'导入post2; 
从'posts / 3'导入post3; 
 
导出默认Em.ObjectController.extend（{
 posts：Em.A（post1，post2，post3），
}）; 
  

但是，我不知道模块名称，因为它们是由预编译器快速创建/命名的。我所知道的是，路径始终以相同的字符串开始。在这种情况下，帖子。

有没有办法导入以特定路径开头的所有模块？例如，我可以如下进行某些：

 从'posts / *导入帖子; 
 
 //或
 
注册表['posts']。forEach（postId，i）{
 var path ='posts /'+ postId; 
 
从路径导入i; 
} 
  

我想要查找和导入的每个模块已导出一个对象。 / p>

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

解决方案

ES6规范不允许您使用 import 关键字。使用模块语法的所有导入和导出必须静态完成。但是，它提供了一个可用于动态导入模块的编程API。 这篇文章有一个很好的总结（以及作为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改变模块加载器的可能事件。

I have a bunch of modules defined in an Ember CLI app and each starts with the same path. I would like to import the modules into a module in the app. For example, I could write:

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),
});

However, I do not know the module names because they are created/named on the fly by a precompiler. All I know is that the path always begins with the same string. In this case, posts.

Is there a way to import all modules that begin with a particular path? For example, how can I do something like the following:

import posts from 'posts/*';

// or

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

  import i from path;
}

Each of the modules I want to find and import has exported an object.

I have been through the ES6 module transpiler docs but can't find much.

解决方案

The ES6 spec doesn't allow you to dynamically import modules using the import keyword. All importing and exporting using the module syntax must be done statically. However, it does provide a programmatic API that you can use to dynamically import modules. This article has a great summary of it (as well as a great summary of the rest of ES6 modules).

My suggestion would be to wrap Ember's loader API in a ES6 compliant wrapper. For instance, Ember-CLI uses the require() function to get modules, so you could do something like this:

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

You could also use the Ember require() function directly, my way just protects you in the likely event that Ember changes their module loader.

这篇关于Ember CLI中动态模块导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！