webpack 3 零基础入门教程 #16 - 使用 ProvidePlugin 插件来处理像 jQuery 这样的第三方包...
怎么在项目中引用 jQuery 这样的库呢?
想一想,只要在 js 文件里,像 import React from 'react'
这样来处理应该就可以,我们来试一下。
首先,安装 jquery。
# 注意这里是 --save 而不是 --save-dev,因为要在线上环境上用 jquery
$ npm install --save jquery
复制代码
接下来来使用 jquery。
src/app.js
import 'jquery';// 在 html 中应该有 id 为 "hello" 的元素吧,这点相信大家都懂的。
// 这一行作用是把元素的内容改成 "change to other text"
$("#hello").text('change to other text');
复制代码
遗憾地告诉你,报错了!
虽然 import
了,但是编译的时候,找不到 $
这个标识符。
我们来改进一下:
src/app.js
import $ from 'jquery';$("#hello").text('change to other text');
复制代码
效果出来。
没啥问题,但这不是我们这篇文章要讲的主要内容。
我们考虑一种情况,跟上面的不太一样,你可能会使用各种 jquery 插件。
我们来试试吧,通过实例来体验。
我们来随便写一个简单的 jquery 插件。
src/jquery.changeStyle.js
$.fn.changeStyle = function(colorStr){this.css("color", colorStr);
}
复制代码
这个插件很简单,只是改变元素的颜色。
怎么来引用和使用呢?
跟之前类似。
src/app.js
import $ from 'jquery';
import './jquery.changeStyle';$("#hello").text('change to other text');
// 把元素改成紫色
$("#hello").changeStyle('pink');
复制代码
报错了,跟之前报的错一样。
Uncaught ReferenceError: $ is not defined
复制代码
说是 $
没定义,可是我们 import
了呀。
那把 import './jquery.changeStyle';
改成 import changeStyle from './jquery.changeStyle';
试一下。
还是没什么卵用。
src/jquery.changeStyle.js
文件引用了 jquery 这个插件,可是外面 src/app.js
却不知道。
我们来改一下 src/jquery.changeStyle.js
文件的内容。
src/jquery.changeStyle.js
import $ from 'jquery';$.fn.changeStyle = function(colorStr){this.css("color", colorStr);
}
复制代码
效果出来了,这样是可以的。
但是有一个问题啊,上面的 jquery 插件是我们自己随意写的,我们想怎么改都可以,如果是第三方的呢,就是说你有可能从网上下载一个别人写好的。
这个时候,你总不能下载后,再来改吧。
我们怎么做呢?
这个时候要引入 webpack 的一个插件:ProvidePlugin。
这个插件可以有这样的效果。
不必通过 import/require 使用模块
把刚才的 src/jquery.changeStyle.js 还原一下。
src/jquery.changeStyle.js
$.fn.changeStyle = function(colorStr){this.css("color", colorStr);
}
复制代码
接下来:
webpack.config.js
module.exports = {plugins: [new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery'}),...]
}
复制代码
什么意思呢?很容易理解,以后要遇到或处理 jQuery
或 $
都会去自动加载 jquery 这个库。
现在我们运行一下 npm run dev
,效果出来了。
这个插件不止可以处理 jquery,还可以处理别的库,等你慢慢用它吧。
就先到这。
webpack 3 零基础入门教程 #16 - 使用 ProvidePlugin 插件来处理像 jQuery 这样的第三方包...相关推荐
- webpack 3 零基础入门教程 #13 - 生产环境 vs 开发环境
接着上一节来,我们要解决上一节所遇到的一个问题. 上一节提到,要让生产环境使用 extract-text-webpack-plugin 这个插件,而开发环境不使用,如何做到呢? 其实原理很简单,只要能 ...
- webpack 3 零基础入门教程 #4 - webpack 的配置文件 webpack.config.js
在命令行中运行 webpack 命令确实可以实现 webpack 的功能,但是我们一般不这么做,我们要用配置文件来处理. 我们把之前学到的知识用 webpack 的配置文件来实现,配置文件的名字叫 w ...
- webpack 3 零基础入门教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
模块热替换 是什么意思? 以前我们使用的 webpack --watch 或 webpack-dev-server 的功能是监听文件改变,就自动刷新浏览器,而这个 模块热替换 不用刷新浏览器,它是只让 ...
- webpack 3 零基础入门教程 #6 - 使用 loader 处理 CSS 和 Sass
1. 什么是 loader 官方的解释是这样的: loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader ...
- 视频教程-Python零基础入门教程-Python
Python零基础入门教程 从2012年从事互联网至今有7年软件编程经验,曾任职国内北京互联网公司,中南林业大学授课Python 现任逻辑教育Python课程负责人,精通Python语言,精通人工智能 ...
- 视频教程-ARDUINO零基础入门教程【代码编程篇】-Arduino
ARDUINO零基础入门教程[代码编程篇] 精通各种单片机编程,有十年以上ARDUINO,51单片机/STM32/PIC/AVR编程,硬件设计,绘图,编程经验.熟悉各种常用传感器使用和物联网通讯 赵勇 ...
- python怎么输出浮点数_python 零基础入门教程第 2 章:基本数据类型 (一)
一.什么是数据类型 编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
- SEO零基础入门教程(外链的发布和软文编写)
seo的作用是众所周知的,对网站进行seo优化,可以给网站带来大量的搜索引擎流量.但是想要做好网站优化也有难度,尤其是对于seo新手来说,因为缺乏理论和实战,所以seo新手需要多加练习.那么具体seo ...
- 九宫怎么排列和使用_剪映零基础入门教程第三十七篇:一学就会系列之九宫格小程序配音...
很多玩儿抖音的朋友都看过九宫格视频,但是并不是每个玩抖音的人都会制作这个九宫格视频,实际这个需要借助小工具来帮忙,而常用抖音的朋友们会对剪映更加熟悉一些,且九宫格视频在剪映内的制作方式则比较简单.那么 ...
- 计算机pscs6教程,photoshop CS6零基础入门教程
<photoshop CS6零基础入门教程>针对零基础学员开设,以教案和实际操作演示相结合的方式,详细地介绍adobe photoshop cs6的各项工具和命令.由浅入深.循序渐进地全面 ...
最新文章
- PIG 中COGROUP中的空值验证
- 417 Pacific Atlantic Water Flow 太平洋大西洋水流
- Linux 内核将要支持最新龙芯 3A2000/3B2000
- 寻找一个字符串中所有重复字符的索引
- 使用 ML.NET 识别乐高颜色块
- python 类、模块、包的区别
- (六)企业部分之jdk
- leetcode51. N皇后
- VMware vSphere 文档--总目录vSphere 5.5 6.0 6.5 6.7 7.0
- JVM内存模型分析(一个程序运行的例子)
- hdu 1802 Black and white painting(置换群)
- android 过滤ip,EditText Android过滤器的IP地址###。###。###。###?
- 欧洲冠军联赛决赛结束
- python3修改文件内容_使用python 修改文件内容
- 《SteamVR实战之PMCore》(Yanlz+Unity+XR+SteamVR+VR+AR+MR+Valve+Oculus+立钻哥哥+==)
- 死循环之----恐怖游轮
- DataMatrix 编码生成和译码原理即方法
- 微分中值定理之柯西中值定理
- 何时是PNE(纯策略纳什均衡)?何时是MNE(混合策略纳什均衡)?
- can和could的用法_can和could的用法辨析