详解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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php常用hash加密函数
2014/11/22 PHP
浅析php工厂模式
2014/11/25 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
javascript动画浅析
2012/08/30 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
在Python中使用列表生成式的教程
2015/04/27 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python判断两个list是否是父子集关系的实例
2018/05/04 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
公司门卫的岗位职责
2014/02/19 职场文书
聚美优品励志广告词
2014/03/14 职场文书
个人承诺书怎么写
2014/05/24 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
python turtle绘图命令及案例
2021/11/23 Python
Nginx跨域问题解析与解决
2022/08/05 Servers