在浏览器中执行（导入）带有 JavaScript 代码的字符串，导入 ES6 模块

Question

我正在制作一个动态系统，需要执行在浏览器应用程序（Edge 或 Chrome 最新版本）中动态生成的 JS 代码。从另一个例子我已经走到这一步了：

async function doIt()
{
        let code = "";
        code += "import { MyClass } from './MyClass.js' ;\n";
        code += 'export default function hello() { console.log( "Hello World" ); console.log( MyClass.test() ); }';
        const dataUri = 'data:text/javascript;charset=utf-8,' + encodeURIComponent(code);
        let module = await import(dataUri);
        console.log(module); // property default contains function hello now
        const myHello = module.default;
        myHello(); // puts "Hello World" to console
}

其中 MyClass.js 有一个普通的 ES6 模块 class:

export class MyClass {
    static test() { return 42; }
}

当我运行 doIt() 函数没有第二行带有 import 语句时，它运行很好，直到它尝试调用 MyClass.test() ，当然，这在当时是未知的。启用第二个导入行后，它会在 Edge 或 Chrome:

中给出错误

    "Uncaught TypeError: Failed to resolve module specifier './MyClass.js'. 
    Invalid relative url or base scheme isn't hierarchical."

我已经尝试创建模块引用的绝对路径，但错误仍然存在。 . 那么，如何使这项工作？或者也许是替代解决方案？但是使用 ES6 模块是一个硬性要求。

Answer 1

回答我自己的问题： import() 似乎有点残废，但解决方法是将所需的动态 JavaScript 放置在当前 HTML 页面的新临时脚本节点的内部 HTML 中。从那里开始，ES6 导入语句执行得很好：

        var script = document.createElement( "script" );
        script.setAttribute( 'type', 'module' );
        script.innerHTML = 'import { MyClass } from "/App/MyClass.js"; \
                            someGlobalVar = MyClass.test();

由于它是运行在全局范围内，您需要将结果存储在某个全局对象中。它可以通过在对象实例上实现回调函数来改进，但我将其留作 reader 的练习。 :-)

在浏览器中执行（导入）带有 JavaScript 代码的字符串，导入 ES6 模块

Execute (import) a string with JavaScript code, that imports ES6 modules, in a browser

javascript

import

dynamic