在浏览器中使用 JavaScript 代码执行（导入）导入 ES6 模块的字符串答案

【问题标题】：Execute (import) a string with JavaScript code, that imports ES6 modules, in a browser在浏览器中使用 JavaScript 代码执行（导入）导入 ES6 模块的字符串
【发布时间】：2021-11-03 21:11:17
【问题描述】：

我正在制作一个动态系统，该系统需要执行在浏览器应用程序（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 模块类：

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 模块是一个硬性要求。

【问题讨论】：

在await import(dataUri) 之前从未见过，太酷了！
正如错误消息所说，基本方案必须是分层的，但是当您动态import 时没有关联的方案，因此静态导入无法解决，如果您尝试使用绝对路径或相对路径。
也许使用require？
@UrielChami 使用 ES6 模块系统是我的硬性要求...
@GuerricP 你是说（目前）不可能将格式化字符串中的 import(...) 与任何用 ES6 模块实现的 JS 代码一起使用？

标签： javascript dynamic import

【解决方案1】：

回答我自己的问题： import() 似乎有些残缺，但一种解决方法是将所需的动态 JavaScript 放在当前 HTML 页面中新的临时脚本节点的 innerHTML 中。从那里开始，ES6 导入语句就可以正常执行了：

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

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

【讨论】：