是否可以动态导入模块？

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. 我可以在 JS 文件中的 | ucfirst 之类的函数中使用 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');
}

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

'import' 和 'export' 只能出现在顶层

那么这真的可行吗？

Answer 1

那么这真的可行吗？

简短回答：否

长答案

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

如何在 {} 中输入名称和 2) 我可以在函数中使用角度过滤器，例如 | ucfirst 在 js 文件中？

来自文章：

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

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

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

更新

现在有dynamic import() 方法。一些打包器喜欢 webpack already support 原生的这种方法。这种方法应该用于模块的动态导入。请注意，“动态导入”是一个涵盖性主题，包含一些子主题，包括“代码拆分”、“动态模块表达式”，以及使用逻辑来确定是否应加载模块及其依赖项。