在纯 JS 脚本之前和之后加载 ES6 模块依赖项

Question

我有一个简单的 JS 脚本parser.js（从工具生成），它依赖于 ES6 模块中定义的变量，lexer.js. 在我的 ES6 模块中，我已经将变量导出到window对象，以便可以从parser.js. 但是，我需要在运行脚本之前以某种方式运行该 ES6 模块。而且似乎没有任何办法可以做到这一点。

尝试 1：在包含我的脚本之前尝试同步加载 ES6 模块

我在 HTML 中尝试了类似的事情。

    <script src="lexer.js" type="module"></script>
    <script src="parser.js"></script>

但它似乎没有按顺序运行。lexer.js追赶parser.js

尝试 2：尝试在 ES6 模块内同步加载脚本

我尝试围绕我的解析器脚本创建一个包装器 ES6 模块，如下所示

// use import to run the module and load variables into the window
import { lexer } from './lexer.js';

// load parser script synchronously
var req = new XMLHttpRequest();
req.open('GET', 'parser.js', false);
req.send(null);
eval(req.responseText);

然而，似乎同步 XMLHttpRequests 已被弃用并且不再工作（编辑：实际上它们确实有效，请参阅下面的我的答案），并且我找不到任何其他方法来同步加载脚本。总的来说，我想说 ES6 模块系统和旧的 javascript include 系统之间的不兼容性令人沮丧。

PS 作为参考，我使用的代码生成工具是Nearley 语法编译器，它允许我从语法中引用我的词法分析器，并生成一个普通的 JS 解析器。

编辑：@yong-quan 建议了一个巧妙的解决方案，只需放入defer脚本包含标签，例如

    <script src="lexer.js" type="module"></script>
    <script src="parser.js" defer></script>

看起来这只是将执行推迟parser.js到最后。但是，我没有提到我实际上有一个名为 的 ES6 模块interpreter.js，需要在parser.js. 抱歉没有早点提到这一点，我认为无论对我的第一个问题有效的解决方案也能解决我的第二个问题。我修复了标题，以澄清我需要 ES6 模块在纯 JS 脚本之前和之后运行。本质上，我需要将这个简单的 JS 脚本集成到我的模块依赖关系图中。

EDIT2：我错了，延迟解决方案有效。请参阅下面的@Aviad 或我自己的答案

Answer 1

我认为这里的良好实践是为此创建某种下载管理器（例如，通过使用 webpack 块加载/动态导入）

另一种选择是使用defer属性。请注意，defer表示脚本按照遇到的顺序运行，因此如果顺序正确，您可以假设parser.js在调用时已加载。interpreter.js

链接：

• 执行顺序为defer
• Webpack 动态导入