详解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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jquery实现抽奖功能
Oct 22 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php单件模式结合命令链模式使用说明
2008/09/07 PHP
php 如何获取数组第一个值
2013/08/06 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
Python FTP操作类代码分享
2014/05/13 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
浅谈Django的缓存机制
2018/08/23 Python
使用TensorFlow实现SVM
2018/09/06 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
中学教师自我鉴定
2014/02/07 职场文书
党员党性分析材料
2014/02/17 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
入党自荐书范文
2014/03/09 职场文书
土木工程求职信
2014/05/29 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年科室工作总结
2014/11/20 职场文书
预备党员转正材料
2014/12/19 职场文书
北大自主招生自荐信
2015/03/04 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Python经常使用的一些内置函数
2022/04/11 Python