How To Make Script Loading And Es6 Module Loading Working Together?

This loads jquery only once: The same is true for:

Solution 1:

As a workaround, you could import the library in a module and "export" it to the old style scripts by adding it to the global scope. Just make sure the old style code only tries to access the library after the module has run.

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

If the library is not an es6 module, then you can do the opposite: include the script in the old style way, and then fetch it from the global scope in your new style code. Assyming jquery.js does window.$ = jQuery:

<scriptsrc="./js/jquery.js"></script><scripttype="module">const jQuery = window.$;
</script>

This means you can't use your modules as-is in some other environment where window.$ is not set, but if you treat const jQuery = window.$ as a sort of "legacy import" and always do it at the top of the module and don't reference window.$ anywhere else, then upgrading to real imports later will be pretty easy.

Share