前端 - vue服务端渲染时，如何动态执行下发的字符串脚本？

Question

配置的下发脚本如下，在客户端渲染时可以通过 importmap 执行。但是在服务端渲染时，如何处理第三方引入的依赖，以及如何转化成可执行的代码

配置时：

import _ from 'lodash';import axios from 'axios';export default async function(ctx) {    const bb = axios;    console.log(bb);    return _}

拿到的配置数据是字符串

"import lodash from 'lodash'\n import axios from 'axios';\n export default async function(ctx) {\n    const bb = axios;\n    console.log(bb);\n    return _;\n}\n"

Answer 1

在服务端渲染时，可以使用vm模块的runInThisContext方法来动态执行下发的字符串脚本。具体步骤如下：

1. 首先，将收到的字符串脚本转化成可执行的代码。可以使用Function构造函数来将字符串转化成一个动态函数对象。

const scriptCode = "import lodash from 'lodash';\nimport axios from 'axios';\nexport default async function(ctx) {\n    const bb = axios;\n    console.log(bb);\n    return _;\n}";const scriptFn = new Function('return ' + scriptCode)();

2. 接下来，使用vm模块的runInThisContext方法，在当前上下文中动态执行脚本。需要注意的是，在执行脚本之前，需要提前在vm模块中注入第三方库的依赖。

const vm = require('vm');const lodash = require('lodash');const axios = require('axios');const sandbox = {  lodash,  axios,  console};const context = vm.createContext(sandbox);const scriptResult = vm.runInContext(scriptFn.toString(), context);

3. 执行完毕后，scriptResult就是脚本的返回结果，可以根据实际需要进行处理和使用。

以上是在服务端渲染时动态执行下发的字符串脚本的方法。