访问已评估代码中导入的函数

Question

我有一个TypeScript文件，其中包含以下代码：

import { functionTest } from './function_test'
function runnerFunctionTest() {
console.log("Test");
}
export class Runner {
run(source : string) {
eval(source);
}
}

如果我实例化一个Runner并调用run("runnerFunctionTest();")，函数会正确运行，但如果我调用run("functionTest();")(它应该运行导入的函数(，我会得到一个错误，说functionTest未定义。

我该怎么解决这个问题？

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

此外，我知道调用eval的安全含义——这是(至少据我所知(做我想做的事情的唯一方法，即在用户的浏览器中运行用户生成的任意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()')