Skip to content Skip to sidebar Skip to footer

How To Get `jquery` As A Function (not As A Module Symbol) After Es6 Style `import * As Jquery From "./js/jquery.js";`

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

Solution 1:

This:

<scripttype="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 (typeofmodule === "object" && typeofmodule.exports === "object") {
      // ...
    } else {
        // we are there when loading as ES6 native modulefactory( global );
    }

} )( typeofwindow !== "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")

<scripttype="module">window.console.log(window.$); // also works and will return $ function even if import is declared bellowimport"./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):

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

This is important feature that can be used in development.

P.S.

This works also but has its trap:

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

Post a Comment for "How To Get `jquery` As A Function (not As A Module Symbol) After Es6 Style `import * As Jquery From "./js/jquery.js";`"