从<variable>导入的typescript而不是文字字符串？

Question

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

在Typescript中可以在导入时动态地将from路径设置为变量吗？

例如转过来：

import {HomeComponent} from './dashboard/home/home.component';

对于这样的事情：

let hompageComponentPath = './dashboard/home/home.component';
import * from hompageComponentPath;

Answer 1

使用动态import提案

ECMAScript中有a proposal for dynamic import。

Since TypeScript 2.4，动态import表达式可用。这是一个例子：

async function getZipFile(name: string, files: File[]): Promise<File> {
    const zipUtil = await import('./utils/create-zip-file');
    const zipContents = await zipUtil.getAsBlob(files);
    return new File(zipContents, name);
}

作为函数使用的import返回一个可以等待的承诺。

...但不是ES6静态import / export

使用语法import / export无法做到这一点，因为ES6标准以静态方式明确定义了模块。

来自文章ES6 In Depth: Modules：

  

对于动态语言，JavaScript已经成为一个令人惊讶的静态模块系统。

     

  
• import和export的所有风格仅允许在模块中出现。没有条件导入或导出，您不能在函数范围内使用import。
  
• 必须在源代码中按名称显式导出所有导出的标识符。您不能以编程方式循环遍历数组并以数据驱动的方式导出一堆名称。
  
• 模块对象被冻结。没有办法将新功能破解成模块对象，即polyfill样式。
  
• 在运行任何模块代码之前，必须急切地加载，解析和链接所有模块的依赖项。 import没有语法可以按需懒惰地加载。
  
• import错误没有错误恢复。一个应用程序可能包含数百个模块，如果任何内容无法加载或链接，则无法运行。您无法在try/catch块中导入。 （这里的好处是因为系统是如此静态，webpack可以在编译时为你检测这些错误。）
  
• 在依赖项加载之前，没有允许模块运行某些代码的钩子。这意味着模块无法控制其依赖项的加载方式。
  

Answer 2

您可以将import用作函数，然后传递任何动态创建的字符串而不是字符串文字。

这会返回一个Promise，但是请记住，它需要在异步函数中而不是文件的最顶端运行。

例如

async main(): Promise<void> { 

        const  myData = await import(`../../data/${environment.theme}/chapters`);
        
        console.log({ myData });
}