是否可以动态导入模块？

Question

我有很多角度组件的导入，看起来我可以编写一个函数来简化导入。我只是不知道怎么做，但这应该很简单。

进口样本：

import {DashboardComponent} from './app/components/dashboard/dashboard.component';
angular.module('app.components').component('dashboard', DashboardComponent);

import {HeaderComponent} from './app/components/header/header.component';
angular.module('app.components').component('header', HeaderComponent);

下面的函数演示了我想要实现的目标，但是我缺少两个概念来使其工作：

1. 如何将变量 ( name) 放入{}？
2. | ucfirst我可以在 JS 文件中的函数中使用 Angular 过滤器吗？

componentImporter('header');

function componentImporter(name)
{
    import {name | ucfirst + 'Component'} from './app/components/'+ name + '/' + name +'.component';

    angular.module('app.components').component(name, name | ucfirst + 'Component');
}

最后我遇到的一个错误是：

“导入”和“导出”可能只出现在顶层

那么这真的可行吗？

Answer 1

那么这真的可行吗？

简短回答：否

长答案

您看到的错误几乎说明了一切...import不能嵌套在条件、循环或其他表达式中。这是一篇关于 ES6 模块的精彩文章，深入探讨了该主题。该文章中也提到了另一个有趣的注意事项，即导入是提升的，类似于函数。

如何在 {} 中输入名称以及 2) 我可以在 | 之类的函数中使用角度过滤器吗？ucfirst 在 js 文件中？

来自文章：

...ES6模块的结构是静态的

在 中使用变量import会使其动态化。您使用的括号语法只能编写为执行部分操作import （即从给定模块导入命名导出）。如果您使用的是Rauschmayer 博士的另一篇文章“Tree Shaking” ，那么这真的很不错。

就我个人而言，我喜欢将所有导入保留在每个文件的顶部，这样可以很容易地看到该特定模块所依赖的内容。

更新

现在有动态import()方法。一些打包程序（例如 webpack）已经原生支持此方法。该方法应该用于动态导入模块。请注意，“动态导入”是一个总主题，其中包含一些子主题，包括“代码分割”、“动态模块表达式”以及使用逻辑来确定是否应加载模块及其依赖项。