如何在 ES6 样式`import * as jQuery from "./js/jquery.js"之后将`jQuery`作为函数（而不是作为模块符号）获取；`

Question

I'm experimenting with native ES6 modules support in Chrome. jQuery is not es6 module (no export) - I know. Still, trying to understand what does it mean for us.

This works without errors:

 <script type="module">
        import * as jQuery from "./js/jquery.js";
        window.console.log(jQuery);
 </script>

But of course jQuery thereis not a function but a Module symbol. The question is: is it possible to extract jQuery/$ function from jQuery module? When there are no exports defined on module?

So do we have a method to extract not exported function from Module in Chrome (as we have it eg in browserfy)?

PS I have made an stupid error ("as jQuery" <-> "as jQyery") but it changes nothing, it is only alias name.

Answer 1

This:

 <script type="module">
        import "./js/jquery.js";
        window.console.log(window.$);
 </script>

creates jQuery on window as "side effect". JQuery code

( function( global, factory ) {
    "use strict";
    if (typeof module === "object" && typeof module.exports === "object") {
      // ...
    } else {
        // we are there when loading as ES6 native module
        factory( global );
    }

} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { 
   // ... jquery code
});

There is some specific in this and the same behaviour can't be expected from all "legacy" scripts.

What is interesting next also works (my explaination: because of "fetching first rule")

 <script type="module">
        window.console.log(window.$); // also works and will return $ function even if import is declared bellow
        import "./js/jquery.js";
 </script>

Syntax import "module-name" described there https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Google article: https://developers.google.com/web/fundamentals/primers/modules

Also this loads jquery ONLY ONCE (and execute it ONLY ONCE):

    <script type="module">
        import("./js/jquery.js").then(
           function(){
               window.console.log("inline 2a =  " + window.$);
           }
        );
    </script>

    <script type="module">
         import("./js/jquery.js").then(
           function(){
               window.console.log("inline 2b =  " + window.$);
           }
        );
    </script>

This is important feature that can be used in development.

PS

This works also but has its trap:

 <script type="module">
 import * as jQuery from "./js/jquery.js"
            window.console.log(jQuery); // returns Module
            window.console.log(window.jQuery); // returns jQuery function
 </script type="module">