从ES6模块的相邻脚本标签导入



对于ES6模块,是否有当前方法或管道中的方法来import,即页面上已经存在的<script>标记中的模块?例如,如果我有2个<script>标签,

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

我应该在第二个<script>标记的import语句中放入什么来代替问号?

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

import a from window.scripts[1];

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

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

我知道这是一个老问题,如果我的声誉更高,我可能会把它作为评论添加。。。

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

[我读过一些关于使用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时,我们还需要用于类型检查的模块is数据,以查看/app中的定义。。。

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

最新更新