如何使脚本加载和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脚本已全部加载，是否可以在不涉及网络/磁盘缓存请求的情况下使用它？

P.S。这只是调查。我在考虑如何将现代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生效window.$ = jQuery：

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

这意味着您不能在未设置window.$的其他环境中按原样使用模块，但是如果您将const jQuery = window.$视为一种“传统导入”并且始终这样做在该模块的顶部，并且在其他任何地方都没有引用window.$，那么以后升级到实际导入将非常容易。