详解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 相关文章推荐
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jquery拖动改变div大小
Jul 04 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jquery实现简单拖拽效果
Jul 20 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 更新数据库中断的解决方法
2009/06/05 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php截取中文字符串函数实例
2015/02/23 PHP
PHP多维数组排序array详解
2017/11/21 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python 远程统计文件代码分享
2015/05/14 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
git进行版本控制心得详谈
2017/12/10 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
python如何求100以内的素数
2020/05/27 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
酒店管理自荐信
2013/10/23 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
学生上课说话检讨书
2014/10/25 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL