javascript - 使用 ES6 模块从相邻脚本标签导入

Question

对于 ES6 模块，是否有当前方法或管道中的方法来 import来自 <script> 的模块标签已经在页面上？例如，如果我有 2 <script>标签，

<script id="a">
    export const a = 'a';
</script>
<script id="b">
    import a from ?;
    console.log(a);
</script>

我将什么放入 import第二个声明<script>标记，代替问号？

id属性用于识别目的，显然，需要某种方式来识别 <script>标记你需要的。它可以通过类或任何其他方式完成，但 ID 必须是唯一的(尽管许多浏览器只使用带有 id 的最后一个标签)，所以我认为这是确保您拥有正确标签的好方法。也可以通过获取 <script> 来完成按文档中的位置标记:例如，在这里你得到第二个脚本标记，所以也许你可以做类似的事情

import a from window.scripts[1];

还有一件事:如果这可以跨 HTML 导入工作，那也很棒。我最初的目的是在站点的不同页面上重用 React 组件，在这些页面中它们可能无法使用相对路径导入，并且至少对于 Webpack，绝对路径并不总是相对于服务器的根目录:有时它们是相对于计算机的根目录，或者至少是网络服务器的根目录。

如何直接从另一个 <script> 导入值页面上的标签？

Answer 1

我知道这是一个老问题，如果我的声誉更高，我可能会将其添加为评论...

我不得不在类似情况下使用的不令人满意的方法是将第一个模块中的每个变量放在窗口上

[我阅读了一些有关使用 eval() 的内容，但还没有尝试对其进行测试。因为我讨厌 eval 函数。]

@T.J. Crowder:我有以下结构

/app
  /modules
    main.js
    other.js
    feature.js
/customer-page1
  index.html
 /data
    data.js
/page2
    index.html
 /data
    data.js
/Page3
    index.html
 /data
    data.js

这是一种复杂的测验应用程序。我们添加了新功能，客户在那里更新了 index.html。

问题在 HTML 中，data/data.js 包含复杂的结构化数据。当我们动态加载 feature.js 时，我们想要/需要模块。

data.js 有时除了原始数据外还需要评估功能，这可能因客户端而异，因此纯 JSON 无法解决问题，我们仍然会遇到路径问题，如 main .js 必须在所有页面上工作并被引用为

<script type='module' src="/app/modules/main.js"></script>

虽然数据很容易被引用为

<script type='module' src="data/data.js"></script>

来自 index.html

当我们使用纯(无框架)Typescript 时，我们还需要模块是用于类型检查的数据，以查看/app 中的定义...

不过，我很乐意找到更优雅的解决方案。