时间戳

首页 > 解决方案 > 从评估代码访问导入的函数

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

问题描述

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

import { functionTest } from './function_test'

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

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

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

我怎样才能解决这个问题？

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

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

标签： javascripttypescriptimportevaljavascript-import

解决方案

因为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()')

推荐阅读