javascript - 在 Plain JS Script 之前和之后加载 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 已被弃用并且不再起作用(编辑:实际上它们起作用，请参阅下面的 my answer)，而且我找不到任何其他方式来同步加载脚本。总的来说，我认为 ES6 模块系统和旧的 javascript 包含系统之间的不兼容性令人沮丧。

附言作为引用，我使用的代码生成工具是 Nearley grammar compiler ，它允许我从语法中引用我的词法分析器，并生成一个普通的 JS 解析器。

编辑:@yong-quan 提出了一个巧妙的解决方案，只需将 defer 放在脚本包含标记中，例如

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

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

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

Answer 1

我认为这里的好做法是为此创建某种下载管理器(例如通过使用 webpack block 加载/动态导入)

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

链接:

• Order of exec with defer
• Webpack dynamic imports