详解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实现文字打印动态效果
Apr 21 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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/29 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
python实现大量图片重命名
2020/03/23 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
标准导师推荐信(医学类)
2013/10/28 职场文书
大学同学聚会邀请函
2014/01/19 职场文书
三八节主持词
2014/03/17 职场文书
赤壁观后感(2)
2015/06/15 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python