从评估的代码访问导入的函数

Question

我有一个包含以下代码的 TypeScript 文件：

import { functionTest } from './function_test'

function runnerFunctionTest() {
    console.log("Test");
}

export class Runner {
    run(source : string) {
        eval(source);
    }
}

如果我实例化一个 Runner 并正确调用 run("runnerFunctionTest();") 函数运行s，但是如果我调用 run("functionTest();")（应该运行导入函数）我收到一条错误消息，说 functionTest 未定义。

我该如何解决这个问题？

我试过的一件事是用 new Function('functionTest', source).(functionTest); 替换 run 中的代码，这很有效，但是必须像这样添加所有导入的函数真的很烦人——大约有 20 个而且这个数字只会随着时间的推移而增加。

此外，我知道调用 eval 的安全隐患 - 这是唯一的方式（至少我知道）做我想做的事，这是运行ning 任意JavaScript 用户在用户浏览器中生成的代码。

Answer 1

因为import不是原生算子，webpack（或者别的什么）给你改造了。通过 webpack 编译后，你的代码变成：

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Runner", function() { return Runner; });
/* harmony import */ var _function_test__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);

function runnerFunctionTest() {
    console.log("Test");
}

class Runner {
    run(source) {
        eval(source);
    }
}

名称 functionTest 已不存在，这就是您无法评估它的原因。

一个可能的解决方案是给它一个本地名称：

import { functionTest } from './function_test'
const function_test = functionTest;
function runnerFunctionTest() {
    console.log("Test");
}

export class Runner {
    run(source : string) {
        eval(source);
    }
}

那你可以运行runner.run('function_test()')

从评估的代码访问导入的函数

Access imported functions from evaled code

javascript

import

eval

typescript

javascript-import