webpack4导入jQuery的新方案
本文的目的
拒绝全局导入jQuery!!
拒绝script导入jQuery!!
找到一种只在当前js组件中引入jQuery,并且使用webpack切割打包的方案!
测试环境
以下测试在webpack3.8.1,jQuery3.2.1,react16+中进行
思路分析
如果说要我在react中全局引入jQuery,我是十分感动,然后拒绝的。
但是,有时候可能react的一些库不够牛逼,还需要用到jQuery的相关插件来辅助完成,这些插件又和jQuery形成了依赖,最终,和我一样,你也可能需要在react中导入jQuery。
这个时候webpack就派上用场了,你也别百度了,网上的方案我试过很多,说句不好听的,大部分都是乐色!
举个例子,很多博客说用下面这种方案,还有其他一堆乱七八糟的辅助方案。
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
});
一开始的尝试,我以为是成功的,因为$可以打印出来了啊!但是,当我打印jQuery的时候,报错了!!
jQuery is not defined
接着,就是一个漫长的探索过程,我以为是CMD的锅、我以为是AMD的锅、我还以为是ES6的锅、甚至我坚定的认为是webpack的锅!!
最终答案
最终我发现就是webpack的锅,幸好webpack提供了另外一种支持方案。
1、安装expose-loader
npm install --save expose-loader
2、在webpack.config中加入下面这段loader代码
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},{
loader: 'expose-loader',
options: '$'
}]
}
3、下面该干嘛?放心,你什么都不用干了,接着很轻松的在你的react组件中导入jQuery
import React from 'react'
require('jquery')
require('jQuery第三方插件')
class Components extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
$(document).ready(function() {
//做爱做的事情
})
}
}
4、这里可能还存在一个小坑,就是很多jQuery第三方插件的作者写的代码不规范,我就遇到了一些变量没有声明的情况,在那些老程序员眼里,js变量不声明表示全局变量,但在webpack眼里,你不声明就未定义了!如果你遇到jQuery插件未定义的报错,通常给这个变量加上var就行了!
5、最后,我自己写的组件本身已经融入了异步打包功能,所以当前包含jQuery的react组件不会污染其他react组件,不会导致其他组件的体积变大,也不会导致公共js的体积变化,前提是你也实现了react组件的异步加载功能。
6、关于webpack异步打包组件的方案,请看我的其他文章!
只要你使用了webpack,无论是react,还是vue开发者也同样适用这种方案
本人引用地址:https://segmentfault.com/a/1190000012112912
webpack4导入jQuery的新方案的更多相关文章
- webpack系列——webpack3导入jQuery的新方案
本文的目的 拒绝全局导入jQuery!! 拒绝script导入jQuery!! 找到一种只在当前js组件中引入jQuery,并且使用webpack切割打包的方案! 测试环境 以下测试在webpack3 ...
- 记录-springMVC访问web-inf下文件问题+在jsp页面导入jquery插件路径不对问题
环境:spring + springMvc + mybatis + maven 关于在springMVC环境访问web-inf目录下文件,其一有在springMVC xml文件下加 <!-- 对 ...
- jQuery数据缓存方案详解:$.data()的使用
我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...
- Atitit.jquery 版本号新特性attilax总结
Atitit.jquery 版本号新特性attilax总结 1. Jq1.4 1 2. 1.5 1 3. 1.6 3 4. Jq1.7 3 ⒉提升了事件委派时的性能有了大幅度的提升.尤其是在ie7下: ...
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...
- 数据库导入.bacpac 文件创建新实例
先连接好数据库,然后打开左侧 对象资源管理器,选择数据库 右键单击 ---> 选择导入数据层应用程序 根据提示向导一步步走就行了 部分导入失败以及处理方案 异常1 : 在数据库master中拒 ...
- 基于jQuery的新浪游戏首页幻灯片
分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <br>& ...
- 如何快速解决myeclipse中导入jquery文件的报错。
如何快速解决myeclipse中导入jquery文件的报错. 解决: 选中错误的文件, 点击右键, 选中myeclipse,点击Exclude From Validation.
- HTML5数据存储方案data与jQuery数据存储方案$.data()的区别
我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法.主要有data()和removeData()这2个实例方法.通过下面的例子 ...
随机推荐
- vue中bus.$on事件被多次绑定
问题描述:只要页面没有强制刷新,存在组件切换,bus.$on方法会被多次绑定,造成事件多次触发 解决办法一:在每次调用方法前先解绑事件( bus.$off ),然后在重新绑定( bus.$on ) b ...
- 【转】unity3d优化总结篇
https://blog.csdn.net/weixin_33733810/article/details/94610167 某些技术或建议有些过时,但也值得参考 另外,关于如何设置不同layer的裁 ...
- js中var的重复声明
腾讯的一个笔试题,先看一下 var a = 100;function fn() { alert(a); //undefined var a = 200; alert(a); //200}fn();al ...
- Firefox63以后 禁止自动更新方式
参考:https://bbs.kafan.cn/thread-2135160-1-1.html 63版以后在prefs.js文件末尾加代码来禁止自动更新的方式失效 新方式: 使用DisableAppU ...
- 一篇非常好的分析 Selenium 2 和 3 的原理: selenium3:你安装 geckodriver 了吗?
转自:https://testerhome.com/topics/10248 另一篇:Selenium WebDriver的工作原理 https://blog.csdn.net/yoyocat915/ ...
- Linux监控命令之==>strace
一.命令介绍 strace 常用来跟踪进程执行时的系统调用和所接收的信号.在Linux 世界,进程不能直接访问硬件设备,当进程需要访问硬件设备(比如读取磁盘文件,接收网络数据等等)时,必须由用户态模式 ...
- sql 查询某一列最大的数据
select colm1,Max(colm2),max(colm3) from table where condition group by colm1
- Django配置Mysql数据库 (Pycharm)
Django配置MySQL数据库方法 一.settings.py文件中修改数据库配置为下面的内容: # Database # https://docs.djangoproject.com/en/2.0 ...
- 第 10 章 python进程与多进程
一.背景知识 顾明思义,进程即正在执行的一个过程,进程是对正在云的程序的一个抽象. 进程的概念起源与操作系统,是操作系统最核心的概念,也是操作系统提供的最古老也是最重要的抽象概念之一,操作系统的其他所 ...
- Java程序设计——不一样的开始 IP地址判定
不一样的开始 其实,写报告,很烦人,但是着实很有用. 报告不但是自己复习回顾的数据库,还是团队合作,技术提高的加速器,认真对待报告,认真对待自己的行业,把他看作自己安身立命的对象. IP地址判定 [问 ...