webpack4系列教程，如何模块化引入jquery？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文仅仅是个引子，是用于引入接下来的几篇文章的。主体内容和webpack其实关系不大，但是确实是在webpack这个环境下做的实验，而且接下来要引出的主体内容都是和webpack有关系的。所以，暂时归档到webpack里面吧。

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、jquery@3.5.1。

传统的引入jquery方法

传统的jquery使用方法，遇到webpack后。只要稍稍修改模版，在合适的位置添加jquery的引用即可。

苏南大叔喜欢把jquery放到head区域。但是，推荐的位置是body的底部。这个缘由苏南大叔就不细讲了，大家各自都有自己的选择。

下面的是个引入jquery的例子，当然，大家可以自由设置这个网络地址。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

重点提示一下大家：这样引用之后，在window这个全局对象上，就被挂载了两个js对象，分别是：$和jQuery。这也就是大家能够自由使用$()或者jQuery()这两个函数的原因所在。只不过这个过程，是自动完成的。所以，大家是没有感知到的。

main.js:

$("#test").html("test");
jQuery("#test").html("test2");

注意：全局对象里面的jQuery的Q是大写。

模块化引入jquery的方法

在这种方案中，就不用在模板里面直接引入jquery.js文件了。在这种情况下，jquery是在main.js之类的文件里面被引入的，最终被webpack之类的打包到dist目录下面的。

引入的方式，有两种: import和require。当然，对于新人来说，这两种方式都是一样的，推荐使用的是require()。

安装jquery

这种情况下，需要先使用npm安装jquery，同时需要特别注意的是：jquery是属于代码的范畴了，并不是构建工具。所以，需要使用的参数是--save，也就是-S。

npm i jquery -S

当然，如果您要安装特定版本的jquery的话，记得使用@符号。比如：

npm i jquery@3.2.0 -S

下面的命令，可以用于查看，都有什么样的版本号可以使用。

npm view jquery versions

相关链接如下：

• https://newsn.net/say/npm-version.html

引入jquery

修改main.js:

let jq = require('jquery');
// import jq from "jquery";
jq("#test").html("test3");

require或者import得到的变量，是可以在当前文件里面直接使用的。但是，大家已经熟悉的$和jQuery，还必须手工挂载到全局上，才能正常使用。

window.$ = jq;
window.jQuery = jq;
$("#test").html("test");
jQuery("#test").html("test2");

相关链接

• https://newsn.net/say/webpack.html
• https://newsn.net/say/electron-jquery.html
• https://newsn.net/say/jquery-winodw-on.html
• https://newsn.net/say/jquery-scrollto.html
• https://newsn.net/say/jquery-datatables.html

总结

js模块化使用jquery的方式，是有些令人困惑的，因为要自己手工注册对象到全局。不过，这就是趋势嘛，没有办法。

接着案例一下，苏南大叔的webpack系列文章的地址：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。