详解webpack引用jquery(第三方模块)的三种办法


Posted in jQuery onAugust 21, 2019

前言

在使用webpack作为构建工具,开发 vue项目的时候,难免会用到 jquery这种第三方插件(毕竟都是从用jquery过来的),那么怎么引用呢?接下来我来说三种方法。

1 html 模板文件引用法,这种方法最直接也是我们最熟悉,直接在项目中的网页模板文件中加入jquery的引用即可

a.引用

详解webpack引用jquery(第三方模块)的三种办法

b.使用

详解webpack引用jquery(第三方模块)的三种办法

2 expose-loader 引用法

a. 安装jquery

npm i jquery -D

b. main.js中引用 jquery

import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'//加入此行

Vue.config.productionTip = false

console.warn("==============main.js输出$对象======================");
console.log($);
console.log(window.$);

详解webpack引用jquery(第三方模块)的三种办法

说明  此时我们会发现,main.js中我们引用了 jquery,$符号我们可以正常使用,但 window.$却不能,而且 helloWorld这个组件中也引用不到$;为什么呢?因为webpack是最后会把代码用闭包的方式打包,$对象并没有挂载在window下,helloWorld这个组件中并没有引用jquery所以它自然是拿不到的,那么怎么能做到在main.js中一次引用,每个组件都能拿到呢?

c. expose-loader将 jquery暴露至全局

1) 安装 expose-loader

npm i expose-loader -D

2) webpack.config.js(vue-cli 创建的项目可在 webpack.base.conf.js)中配置当引用 jquery 时使用 expose-loader

......
 module: {
  rules: [
   //增加以下配置即可
   {
    test: require.resolve('jquery'),
    loader: 'expose-loader?$'
   },
.....

详解webpack引用jquery(第三方模块)的三种办法

3 webpack插件法,给每个模块注入$

webpack.config.js(vue-cli 创建的项目可在 webpack.base.conf.js)
中配置

引用 webpack

const webpack = require('webpack')

配置插件

plugins:[
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery",
   "window.$": "jquery",
  })
 ]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
jQuery zTree插件使用简单教程
Aug 16 #jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
You might like
推荐php模板技术[转]
2007/01/04 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
原生js实现购物车功能
2020/09/23 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
python如何查看安装了的模块
2020/06/23 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
行政处罚事先告知书
2015/07/01 职场文书
聘任通知书
2015/09/21 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server