本文的目的

拒绝全局导入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的新方案的更多相关文章

  1. webpack系列——webpack3导入jQuery的新方案

    本文的目的 拒绝全局导入jQuery!! 拒绝script导入jQuery!! 找到一种只在当前js组件中引入jQuery,并且使用webpack切割打包的方案! 测试环境 以下测试在webpack3 ...

  2. 记录-springMVC访问web-inf下文件问题+在jsp页面导入jquery插件路径不对问题

    环境:spring + springMvc + mybatis + maven 关于在springMVC环境访问web-inf目录下文件,其一有在springMVC xml文件下加 <!-- 对 ...

  3. jQuery数据缓存方案详解:$.data()的使用

    我们经常使用隐藏控件或者是js全局变量来临时存储数据,全局变量容易导致命名污染,隐藏控件导致经常读写dom浪费性能.jQuery提供了自己的数据缓存方案,能够达到和隐藏控件.全局变量相同的效果,但是j ...

  4. Atitit.jquery 版本号新特性attilax总结

    Atitit.jquery 版本号新特性attilax总结 1. Jq1.4 1 2. 1.5 1 3. 1.6 3 4. Jq1.7 3 ⒉提升了事件委派时的性能有了大幅度的提升.尤其是在ie7下: ...

  5. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...

  6. 数据库导入.bacpac 文件创建新实例

    先连接好数据库,然后打开左侧 对象资源管理器,选择数据库  右键单击 ---> 选择导入数据层应用程序 根据提示向导一步步走就行了 部分导入失败以及处理方案 异常1 : 在数据库master中拒 ...

  7. 基于jQuery的新浪游戏首页幻灯片

    分享一款基于jQuery的新浪游戏首页幻灯片,带左右箭头,选项卡缩略图,自动轮播切换的jQuery幻灯片代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <br>& ...

  8. 如何快速解决myeclipse中导入jquery文件的报错。

    如何快速解决myeclipse中导入jquery文件的报错. 解决: 选中错误的文件, 点击右键, 选中myeclipse,点击Exclude From Validation.

  9. HTML5数据存储方案data与jQuery数据存储方案$.data()的区别

    我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法.主要有data()和removeData()这2个实例方法.通过下面的例子 ...

随机推荐

  1. Swagger常用参数用法

    别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/m ...

  2. debug1: Could not open authorized keys

    ssh登录的时候一直日志一直出现debug1: Could not open authorized keys登录不上,检查文件夹权限都正常用这条命令解决了 restorecon -FRvv /home ...

  3. Android Intent和IntentFilter详解与使用及实现系统“分享”接口

    Intent Android中提供了Intent机制来协助应用间的交互与通讯,Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述,Android则根据此Intent的描述,负责找到 ...

  4. 关系代数(Relation Algebra)与SQL语句的对应关系

    SQL语句的执行一般是先翻译为关系代数再被执行的(能有效提高执行速度),所以我们有必要 了解关系代数与SQL语句间的对应关系. 就像高中代数由+-*/和数字组成,关系代数是由union.interse ...

  5. flutter 快速生成Widget

    快速生成对象 List.generate(20, (i){ return Text("$i"); }), 快速生成Widget ListView.builder( itemCoun ...

  6. Spring MVC三种返回方式

    spring mvc处理方法支持如下的返回方式:ModelAndView, Model, ModelMap, Map,View, String, void. 下面一一进行说明: 1.ModelAndV ...

  7. 阶段3 2.Spring_10.Spring中事务控制_6 spring基于XML的声明式事务控制-配置步骤

    环境搭建 新建工程 把对应的依赖复制过来 src下内容复制 配置spring中的声明事物 找到bean.xml开始配置 配置事物管理器 里面需要注入DataSource 2-配置事物通知 需要先导入事 ...

  8. 三十七:数据库之SQLAlchemy外建之多对多关系

    准备工作 from sqlalchemy import create_engine, Column, Integer, String, Float, Text, ForeignKeyfrom sqla ...

  9. SO BAPI SD_SALESDOCUMENT_CREATE

    DATA: E_ORDER_HEADER_IN  LIKE  BAPISDHD1 OCCURS 0 WITH HEADER LINE,           E_ORDER_PARTNERS   LIK ...

  10. 精通CSS:高级Web标准解决方案(第二版) 不明白的地方

    P47 在图3-14中,当把框1向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不在处于文档流中,所以它不占据空间,实际上覆盖住了框2,使框2从视图中消失. 我的疑问是, ...