时间戳

首页 > 解决方案 > 打字稿：如何从源代码导入而不是文件

angular - 打字稿：如何从源代码导入而不是文件

问题描述

我使用这个片段：

  loadComponent(name) {
    var url = this.configurationService.configuration.api_url+"/generator/dynamic-loading/component/"+name;
    this.http.get(url, {responseType: 'text'}).subscribe(componentCode => {
      let result = ts.transpile(componentCode);
      console.log("### Component",result);
    });
  }

我想“从结果中导入名称”

怎么可能？

标签： angulartypescript

解决方案

如果我理解正确，result是模块的 JavaScript 源代码（我将其称为“动态模块”），并且您想要加载此模块并访问其导出。假设有一个固定的、允许动态模块导入的模块列表，将动态模块转换为 CommonJS 格式并编写一个迷你模块加载器来eval为 JavaScript 源代码设置适当的上下文可能是最简单的。

function evalCommonjsModule(moduleSource: string, requireMap: Map<string, {}>) {
    let moduleFunc = eval("(module, exports, require) => {" + moduleSource + "}");
    let module = {exports: {}};
    moduleFunc(module, module.exports, (requireName) => {
        let requireModule = requireMap.get(requireName);
        if (requireModule === undefined)
            throw new Error(`Attempted to require(${requireName}), which was not in requireMap`);
        return requireModule;
    });
    return module.exports;
}


import * as AllowedImport1 from "allowed-import-1";
import * as AllowedImport2 from "allowed-import-2";

// In loadComponent:

// Example from https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#a-simple-transform-function
let result = ts.transpileModule(componentCode, {
  compilerOptions: { module: ts.ModuleKind.CommonJS }
});
let resultModule = evalCommonjsModule(result, new Map([
    ["allowed-import-1", AllowedImport1],
    ["allowed-import-2", AllowedImport2]
]));
let name = resultModule.name;

如果动态模块的导入不限于预先知道的简短列表，那么您的选项将取决于您用于主项目的模块捆绑器或加载器。由于loadComponent已经是异步的，如果您的捆绑器/加载器支持动态导入，那么您可以将动态模块转换为 AMD 格式，并让您的迷你加载器在加载其主体之前执行动态模块的所有依赖项的动态导入。可能有现有的库可以帮助解决这个问题，但我不熟悉它们；其他人应该随时添加有关他们的信息。

推荐阅读