在ES6样式中，如何从"./js/jquery.js"中将jQuery *导入为jQuery后，如何将jQuery作为函数(而不是作为模块符号)； [英] how to get `jQuery` as a function (not as a Module symbol) after ES6 style `import * as jQuery from "./js/jquery.js";`

问题描述

我正在尝试在Chrome中提供<​​strong>原生ES6模块支持. jQuery不是es6模块(不导出)-我知道.尽管如此，试图了解这对我们意味着什么.

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.

这有效，没有错误:

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

但是，当然jQuery不是功能，而是Module符号. 问题是:是否有可能从jQuery模块中提取jQuery/$函数?何时在模块上未定义导出?

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?

那么，我们是否有一种方法可以从Chrome的Module中提取未导出的功能(例如在browserfy中)?

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

P.S.我犯了一个愚蠢的错误("as jQuery"<->"as jQyery")，但是它什么也没有改变，它只是别名.

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

推荐答案

此:

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

在窗口上创建jQuery作为副作用". jQuery代码

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>

语法import "module-name"在那里描述 https://developer.mozilla.org/zh-美国/docs/Web/JavaScript/Reference/Statements/import

Google文章: https://developers.google.com/web/fundamentals/底漆/模块

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

这也将仅加载jquery(并仅执行一次):

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.

P.S.

这也有效，但有陷阱:

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

这篇关于在ES6样式中，如何从"./js/jquery.js"中将jQuery *导入为jQuery后，如何将jQuery作为函数(而不是作为模块符号)；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！