如何使脚本加载和es6模块加载协同工作？

Question

这只加载jquery一次：

<script type="module">
            import "./js/jquery.js";
            import "./js/jquery.js";
</script>

同样的情况也适用于：

<script type="module">
            import "./js/jquery.js";
</script>
<script type="module">
            import "./js/jquery.js";
</script>

但是，这会加载jquery 两次：

   <script src="./js/jquery.js"></script>
   <script type="module">
       import "./js/jquery.js";
   </script>

是否可以先告诉浏览器的ES6模块解析器

<script src="./js/jquery.js"></script>

jquery已经加载完毕，并且可以在不涉及网络/磁盘缓存请求的情况下使用它？

这只是调查而已。我在考虑如何将现代ES6模块和“遗留代码”(在现代浏览器中)结合在一起。我更喜欢通过“旧式<script>”加载jquery插件系统，因为内联代码取决于它。

我知道jquery不是很好的示例，它没有导出。尽管如此，我们还是将它与babel import $ from jQuery;一起使用，我想了解在转换过程中应该执行什么样的转换来准备代码，用ES6模块加载本机支持。如果你知道这样的babel 7插件-这也是非常有价值的。

Answer 1

作为解决办法，您可以在模块中导入库，并通过将它添加到全局范围，将其“导出”到旧的样式脚本中。只需确保旧样式代码只在模块运行后才尝试访问库。

<script type="module">
    import jQuery from "./jquery-es6.js";
    window.$ = jQuery;
</script>

如果库不是es6模块，那么您可以做相反的事情:以旧的样式方式包含脚本，然后在新样式代码中从全局范围获取它。亚述人jquery.js does window.$ = jQuery

<script src="./js/jquery.js"></script>
<script type="module">
    const jQuery = window.$;
</script>

这意味着您不能像在没有设置window.$的其他环境中一样使用模块，但是如果您将const jQuery = window.$视为一种“遗留导入”，并且总是在模块的顶部执行，并且不引用其他任何地方的window.$，那么以后升级到真正的导入将非常容易。