在浏览器中动态执行 TypeScript答案

【问题标题】：Dynamic execution of TypeScript in the browser在浏览器中动态执行 TypeScript
【发布时间】：2018-10-25 12:03:17
【问题描述】：

我有异步下载另一个 TypeScript/javascript 模块的 TypeScript：

(function (exports) {
    "use strict";

    var path = require('path');

    exports.convertData = function (data) {
        return "converted " + data;
    }

})(typeof exports === 'undefined' ? this['converter.someConverter'] = {} : exports);

在我的主应用程序执行期间，我将此模块作为字符串接收，我必须从那里使用函数 convertData。

所以，我正在尝试以下方法：

eval(rendererScript);
console.log(exports.convertData("some data"));

只有在 var path = require('path'); 将被删除的情况下才能正常工作。否则会出现以下错误： 未捕获（承诺中）错误：尚未为上下文加载模块名称“路径”：_。使用 require([])

问题：

在这种情况下可以使用 eval() 吗？（我们知道 eval 是邪恶的）
如何与require('path')？我正在尝试使用 RequireJS (http://requirejs.org/docs/node.html#2) 但收到以下错误：未捕获的错误：“路径”的脚本错误

已编辑

所以，为了避免 eval() 找到了以下解决方案：

const scriptTag = document.createElement("script");
scriptTag.innerHTML = rendererScript;
document.body.appendChild(scriptTag);
this.m_rendererPlugin = (window as any)[`converter.someConverter`];

【问题讨论】：

您正在使用 node.js 标签，并且您指的是 RequireJS 文档中有关 Node.js 的部分内容。但是，由于文档中给出的原因，您报告看到的错误永远不会发生在 Node 中：RequireJS 只会将请求传递给 Node 的 require，而 require('path') 会给您 Node 的 path module。您是真的在 Node 中运行代码，还是在浏览器中运行代码？
对不起，我没有提到它。是的，我正在浏览器中运行。问题是 require() 在浏览器中不起作用，我希望使用 RequireJS 来解决这个问题。还是我走错路了？
我的意思是TypeScript是用JavaScript编译的
也许我可以以某种方式使用 webpack？使用 require.resolve("path") 获取模块 id 然后将 require('path') 替换为 __webpack_require__(123)？

标签： javascript node.js requirejs eval

【解决方案1】：

由于在您的情况下输入代码是动态的，您可能需要在运行时使用 TypeScript 编译器 API 进行编译。如果您没有专门的服务器，您可以仍然使用 TypeScript 编译器 API https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API 在浏览器中编译 TS 项目。

这里有一个游乐场，可以在浏览器中将 ts 100% 转换为 js https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1
您也可以在浏览器中使用 ts-simple-ast 库，它有更好的文档和更易于使用 - https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsSimpleAst1

再次，对于转译，您无需执行任何操作，只需在 html 中包含 node_modules/typescript/typescript.js 即可。但是对于更复杂的 API，例如类型检查和语言服务 API (https://github.com/Microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin)，您需要实现一些接口。

【讨论】：