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

附言这只是调查。我在考虑如何将现代 ES6 模块和“遗留代码”(在现代浏览器中)混合在一起。我更愿意通过“旧式 <script>”加载 jquery 插件系统，因为内联代码依赖于它。

我知道 jquery 不是很好的示例，它没有导出。我们仍然将它与 babel 一起使用 import $ from jQuery;我想了解在转译过程中应该进行什么样的转换，以准备代码加载 ES6 模块 native 支持。如果你知道这样的 babel 7 插件——这也是非常有值(value)的。

Answer 1

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

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

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

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

这意味着您不能在未设置 window.$ 的其他环境中按原样使用您的模块，但是如果您对待 const jQuery = window.$ 作为一种“遗留导入”，始终在模块顶部进行，不要在其他任何地方引用 window.$，这样以后升级到真正的导入将非常容易。