详解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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
jQuery treeview树形结构应用
Mar 24 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/03/10 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript学习笔记之Function对象
2015/01/22 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
使用svg实现动态时钟效果
2018/07/17 Javascript
微信小程序功能之全屏滚动效果的实现代码
2018/11/22 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
Python函数中定义参数的四种方式
2014/11/30 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python数据结构之翻转链表
2017/02/25 Python
简单了解Django模板的使用
2017/12/20 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
django云端留言板实例详解
2019/07/22 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python 解决函数返回return的问题
2020/12/05 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
护士毕业自我鉴定
2014/02/07 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
施工安全承诺书
2014/05/22 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
2016七夕情人节感言
2015/12/09 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python