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";`"