webpack4 系列教程(十二):处理第三方JavaScript库
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步《webpack4 系列教程(十二):处理第三方 JavaScript 库》原文地址。或者来我的小站看更多内容:godbmw.com
0. 课程介绍和资料
本节课的代码目录如下:
本节课的package.json
内容如下:
{
"dependencies": {
"jquery": "^3.3.1"
},
"devDependencies": {
"webpack": "^4.16.1"
}
}
1. 如何使用和管理第三方JS
库?
项目做大之后,开发者会更多专注在业务逻辑上,其他方面则尽力使用第三方JS
库来实现。
由于js
变化实在太快,所以出现了多种引入和管理第三方库的方法,常用的有 3 中:
- CDN:
<script></script>
标签引入即可 - npm 包管理: 目前最常用和最推荐的方法
- 本地
js
文件:一些库由于历史原因,没有提供es6
版本,需要手动下载,放入项目目录中,再手动引入。
针对第一种和第二种方法,各有优劣,有兴趣可以看这篇:《CDN 使用心得:加速双刃剑》
针对第三种方法,如果没有webpack
,则需要手动引入import
或者require
来加载文件;但是,webpack
提供了alias
的配置,配合webpack.ProvidePlugin
这款插件,可以跳过手动入,直接使用!
2. 编写入口文件
如项目目录图片所展示的,我们下载了jquery.min.js
,放到了项目中。同时,我们也通过npm
安装了jquery
。
为了尽可能模仿生产环境,app.js
中使用了$
来调用 jq,还使用了jQuery
来调用 jq。
因为正式项目中,由于需要的依赖过多,挂载到window
对象的库,很容易发生命名冲突问题。此时,就需要重命名库。例如:$
就被换成了jQuery
。
// app.js
$("div").addClass("new");
jQuery("div").addClass("old");
// 运行webpack后
// 浏览器打开 index.html, 查看 div 标签的 class
3. 编写配置文件
webpack.ProvidePlugin
参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库。
webpack.ProvidePlugin
会先从npm
安装的包中查找是否有符合的库。
如果webpack
配置了resolve.alias
选项(理解成“别名”),那么webpack.ProvidePlugin
就会顺着这条链一直找下去。
// webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: {
app: "./src/app.js"
},
output: {
publicPath: __dirname + "/dist/",
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
resolve: {
alias: {
jQuery$: path.resolve(__dirname, "src/vendor/jquery.min.js")
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery", // npm
jQuery: "jQuery" // 本地Js文件
})
]
};
4. 结果分析和验证
老规矩,根绝上面配置,先编写一下index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div></div>
<script src="./dist/app.bundle.js"></script>
</body>
</html>
命令行运行webpack
进行项目打包:
在 Chrome 中打开index.html
。如下图所示,<div>
标签已经被添加上了old
和new
两个样式类。证明在app.js
中使用的$
和jQuery
都成功指向了jquery
库。
webpack4 系列教程(十二):处理第三方JavaScript库的更多相关文章
- CRL快速开发框架系列教程十二(MongoDB支持)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- webpack4 系列教程(十五):开发模式与webpack-dev-server
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十五):开发模式与 webpack-dev-server>原文地址.更欢迎来我的 ...
- webpack4 系列教程(十四):Clean Plugin and Watch Mode
作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...
- 微信程序开发系列教程(二)使用JavaScript给微信用户发送消息
我之前的文章 微信程序开发系列教程(一)开发环境搭建 介绍了微信开发环境的搭建,这篇文章我们就来一步步开发一些具体的功能. 功能需求:当有微信用户关注了您的公众号之后,您用JavaScript发送一个 ...
- Unity3D脚本中文系列教程(十二)
http://dong2008hong.blog.163.com/blog/static/4696882720140313545332/ GameObject类,继承自Object Unity场景中所 ...
- webpack4 系列教程(十): 图片处理汇总
多图预警!!! 此篇博文共 5 张图(托管在 GitHub),国内用户请移步>>>原文. 或者来我的小站哦 0. 课程源码和资料 本次课程的代码目录(如下图所示): >> ...
- Spring Boot系列教程十二:Spring boot集成Redis
一.创建项目 项目名称为 "springboot_redis",创建过程中勾选 "Web","Redis",第一次创建Maven需要下载依赖 ...
- Spring Boot2 系列教程 (十二) | 整合 thymeleaf
前言 如题,今天介绍 Thymeleaf ,并整合 Thymeleaf 开发一个简陋版的学生信息管理系统. SpringBoot 提供了大量模板引擎,包含 Freemarker.Groovy.Thym ...
- webpack4 系列教程(十六):开发模式和生产模式·实战
好文章 https://www.jianshu.com/p/f2d30d02b719
随机推荐
- iOS开发之Alamofire源码解析
今天博客中的Alamofire源码的版本是以3.4版本为例.上篇博客系统的对NSURLSession相关的东西进行了详细的解析,详情请看<详解NSURLSession>,为了就是给本篇博客 ...
- 包建强的培训课程(16):Android新技术入门和提高
@import url(/css/cuteeditor.css); Normal 0 10 pt 0 2 false false false EN-US ZH-CN X-NONE $([{£¥·‘“〈 ...
- select count(*) 底层究竟做了什么?
阅读本文大概需要 6.6 分钟. SELECT COUNT( * ) FROM t是个再常见不过的 SQL 需求了.在 MySQL 的使用规范中,我们一般使用事务引擎 InnoDB 作为(一般业务)表 ...
- BP算法基本原理推导----《机器学习》笔记
前言 多层网络的训练需要一种强大的学习算法,其中BP(errorBackPropagation)算法就是成功的代表,它是迄今最成功的神经网络学习算法. 今天就来探讨下BP算法的原理以及公式推导吧. 神 ...
- Oracle创建表空间创建用户和用户授权
今天要创建一个Oracle用户,然后发现sql不太记得了,然后只能再去找找资料,发现这样效率并不是很高,所以记录成博客,有需要就直接从博客复制. 下面是我简单整理的,有需要可以参考. --创建表空间 ...
- 使用QNetworkAccessManager实现Qt的FTP下载服务
从Qt5开始,官方推荐使用QNetworkAccessManager进行Ftp和http的上传和下载操作:Qt4中使用的QtFtp模块即作为独立模块,需要自己从github上进行下载编译后使用(官方地 ...
- 在 React、Vue项目中使用 SVG
在一些现代的扁平化设计网站,特别是移动端网站,经常会包含许多简单而清晰的小图标,例如网站图标.用户的默认头像.移动端网页首页底部固定的切换栏等,这些小图标一般都是由美工做好,可能会放到精灵图上,前端再 ...
- 基于python的opcode优化和模块按需加载机制研究(学习与个人思路)(原创)
基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 个人技术博客:http://www.cnblogs.com/M ...
- 用canvas实现红心飘飘的动画效果
两周前,项目里需要实现一个红心飘飘的点赞效果.抓耳挠腮了老半天,看了几篇大佬的文章,终于算是摸了个七七八八.不禁长叹一声,还是菜啊.先来看一下效果:(传送门进去点一波) 一.Bezier曲线运动轨迹 ...
- 2012-2014 三年浙江 acm 省赛 题目 分类
The 9th Zhejiang Provincial Collegiate Programming Contest A Taxi Fare 25.57% (166/649) (水 ...