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

苏南大叔:webpack4系列教程,如何模块化引入jquery? - webpack-jquery
webpack4系列教程,如何模块化引入jquery?(图4-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0jquery@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");
注意:全局对象里面的jQueryQ是大写。

模块化引入jquery的方法

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

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

安装jquery

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

npm i jquery -S

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

npm i jquery@3.2.0 -S

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

npm view jquery versions

相关链接如下:

苏南大叔:webpack4系列教程,如何模块化引入jquery? - npm-versions
webpack4系列教程,如何模块化引入jquery?(图4-2)

引入jquery

修改main.js:

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

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

苏南大叔:webpack4系列教程,如何模块化引入jquery? - webpack-jquery-require
webpack4系列教程,如何模块化引入jquery?(图4-3)

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

苏南大叔:webpack4系列教程,如何模块化引入jquery? - webpack-jquery-import
webpack4系列教程,如何模块化引入jquery?(图4-4)

相关链接

总结

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

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   jquery    webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: