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
随机推荐
- JavaScript的文档对象模型DOM
小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...
- Java中最常用的集合类框架之 HashMap
一.HashMap的概述 HashMap可以说是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构. HashMap是基于哈希表的Map接口实现的,此实现提供所有可选的映射 ...
- 一文读懂高性能网络编程中的I/O模型
1.前言 随着互联网的发展,面对海量用户高并发业务,传统的阻塞式的服务端架构模式已经无能为力.本文(和下篇<高性能网络编程(六):一文读懂高性能网络编程中的线程模型>)旨在为大家提供有用的 ...
- 吴恩达机器学习笔记48-降维目标:数据压缩与可视化(Motivation of Dimensionality Reduction : Data Compression & Visualization)
目标一:数据压缩 除了聚类,还有第二种类型的无监督学习问题称为降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,而且它也让我们 ...
- DOS窗口查看端口占用
背景:最近用tomcat,一直访问不了,要账号密码登录,最后发现问题原因根本是tomcat的默认端口号8080被占用了,下面介绍如何通过dos窗口找到占用端口的进程. 方法: 打开DOS窗口,输入ne ...
- 微信小程序的wx-charts插件-tab选项卡
微信小程序的wx-charts插件-tab选项卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const ...
- 微信小程序提交审核并发布详细流程
微信小程序提交审核并发布详细流程 审核在1小时到N天不等 官方7天,一般3天内 提交审核?如何发布?审核过程中注意事项? 服务器: 域名只支持 https (request.uploadFile.do ...
- SpringMVC框架三:参数绑定
这篇文章整合了SpringMVC和MyBatis: https://www.cnblogs.com/xuyiqing/p/9419144.html 接下来看看参数绑定: 默认Conrtroller可以 ...
- java中最常见的几种运行时异常,你get了吗?
NullPointerException (空指针异常) ClassCastException (类型强制转换异常) NumberFormatException (数字格式异常) NegativeAr ...
- Linux的 文件 和 目录 管理
包括了文件和目录的创建.删除.修改,权限.压缩.搜索.分区.挂载 简单的一些命令: [ pwd ]查看当前所在目录 [ cd .. ]上级目录 [ cd ~ ]当前用户的家目录 [cd -]上次打开目 ...