javascript - Typescript 运行时模块加载(使用 webpack)和类似 dll 的后期绑定(bind)

Question

假设我有一组不断增长的不同模板要与 React 一起使用。每个模板都扩展React.Component并在其子项周围呈现精美的边框。

我希望根据一些仅在运行时已知的数据动态生成此类模板(带有缓存等)。

在运行时我可以计算包含模板的模块的名称。我可以将 URL 映射到服务器代码以提供 JavaScript 源代码并期望浏览器能够运行它。

我想我会用一个简单的方法来隔离这段代码，类似于按名称加载 *.DLL 并调用其导出的符号。我的以下猜测不起作用。

private async templateLoader():Promise<React.ComponentType>{
    const templateModuleName:string = this.props.api.getTemplateName(this.props.user);
    return (await import(templateModuleName)) as React.ComponentType;
}

我可以想象 JavaScript 像这样使用 require.js

var propsMappedFromStore=this.props;
//...
require(["api","user"],function(api,user){
  var templateModuleName = api.getTemplateName(user);
  require([templateModuleName],function(tt){
   propsMappedFromStore.updateTemplate(tt);
  })
})

但是 Typescript 和 Webpack 可以吗？

我如何要求/导入由表达式标识的模块？

Answer 1

在开发 React 应用程序时，我遇到了这个问题。该应用程序分为多个模块。在这些模块中，有一组具有特定的属性。这些模块不能参与 webpack 构建过程。它们在设计和构建时并不存在。相反，我只知道他们导出的形状。

要使用这些模块，浏览器必须使用加载程序。 RequireJS AMD 加载器是一个不错的选择。

我花了相当长的时间才弄清楚如何使 WebPack 能够很好地支持异步加载。这里的关键字是 requirejs，而不是 require 或 import。

使用 requirejs 可以消除 webpack.config.js 或任何其他魔法的任何魔力。下面的代码应该会给你一个想法。使用语句 requirejs(["locs/"+ lang]…) 会导致位于 /{baseUrl}/locs/{lang}.js 的 http 请求，该请求由Web 服务器根据其智能程度。

import { getLanguage, IGreetingFormatStrings } from "./lociface";
import { defGeetings } from "./config";

function getGreetings(lang: string): Promise<IGreetingFormatStrings> {
    return new Promise((resolve) => {
        requirejs(["locs/" + lang]
            , (m) => { resolve(m.locGreetings as IGreetingFormatStrings); }
            , () => { resolve(defGeetings) }
        )
    });
}

export async function greeter(person: string): Promise<string> {
    const hours = new Date().getHours();
    const greetings = await getGreetings(getLanguage());
    if (hours > 6 && hours < 12) {
        return greetings.morning + person;
    }
    if (hours < 19) {
        return greetings.afternoon + person;
    }
    return greetings.night + person;
}