how to make script loading and es6 module loading working together?

Question

This loads jquery only once:

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

The same is true for:

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

But this loads jquery two times:

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

Is it possible somehow to tell the browser's ES6 modules resolver that after first

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

jquery scirpt is allready loaded and it is possible to use it without involving network/disk cache request?

P.S. This is just investigation. I'm thinking how we can mix modern ES6 modules and "legacy code" (in modern browsers) together. I would prefer to load jquery plugin system through "old style <script>" since inline code depends on it.

I know that jquery is not good sample it doesn't have exports. Still we use it with babel import $ from jQuery; and I want to understand what kind of transformations should be done during transpiling to prepare code be loaded with ES6 modules native support. If you know such babel 7 plugins - this is also very valuable.

BudgieInWA · Accepted Answer · 2018-08-20 13:00:14Z

3

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.

<script type="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:

<script src="./js/jquery.js"></script>
<script type="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.

edited Aug 20, 2018 at 13:00

answered Aug 20, 2018 at 12:41

BudgieInWA

2,2761 gold badge18 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Roman Pokrovskij Over a year ago

:)) This form of sentence doesn't work in browser. stackoverflow.com/questions/51922739/… What pity - this doesn't solve inline code support "problem" automatically... still need to wrap every inline to import promise or to document.addEventListener("DOMContentLoaded", function (event) {..});

BudgieInWA Over a year ago

So the problem is that import * as jQuery from "./js/jquery.js" doesn't provide access to the values inside the jquery.js script? That sounds like a separate problem.

BudgieInWA Over a year ago

I have added a note about working with old style scripts in your scenario. My answer doesn't really answer the question you asked, but I think this is the right place to talk about the workarounds, because it might be impossible.

Roman Pokrovskij Over a year ago

Thank you. Other aspect of the problem: e.g. my babel/ts code contains import $ from "jquery". I guess I need to remove it (and all other sript src loaded modules) as part of "transpiling" to "ready for ES6 native loaders code" as well as change npm names in import to path. Have you any read an article how to "migrate" (actually support both) from "webpack" to native ES6 modules that can be loaded to browser?

Collectives™ on Stack Overflow

how to make script loading and es6 module loading working together?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related