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
随机推荐
- 手把手教你Chrome浏览器安装Postman(含下载云盘链接)【转载】
转载自:http://www.ljwit.com/archives/php/278.html 说明: Postman不多介绍,是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.本文主要 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
- 京东购物车的 Java 架构实现及原理!
今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭 ...
- Javascript高级编程学习笔记(61)—— 事件(5)UI事件
UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...
- 每天学点SpringCloud(十四):Zipkin使用SpringCloud Stream以及Elasticsearch
在前面的文章中,我们已经成功的使用Zipkin收集了项目的调用链日志.但是呢,由于我们收集链路信息时采用的是http请求方式收集的,而且链路信息没有进行保存,ZipkinServer一旦重启后就会所有 ...
- Redis学习笔记之延时队列
目录 一.业务场景 二.Redis延时队列 一.业务场景 所谓延时队列就是延时的消息队列,下面说一下一些业务场景比较好理解 1.1 实践场景 订单支付失败,每隔一段时间提醒用户 用户并发量的情况,可以 ...
- 过了所有技术面,却倒在 HR 一个问题上。。
面试问离职原因,这是我们广大程序员朋友面试时逃不开的问题,如果答得不好,可能就影响了你整个的面试结果. 最近在栈长的Java技术栈vip群里,我也看到大家在讨论这个问题,其中有个朋友的回复栈长很有感触 ...
- 解决ios关于:ERROR Internal navigation rejected - <allow-navigation> not set for url='about:blank'
在mac上,cordova打包ionic项目为苹果手机app出现 这个问题:ERROR Internal navigation rejected - <allow-navigation> ...
- springBoot(9)---定时任务,异步任务
定时任务,异步任务 一.定时任务 1.步骤: 1:在启动类上写@EnableScheduling注解 2:在要定时任务的类上写@component 3:在要定时执行的方法上写@Scheduled(fi ...
- java为什么用咖啡?
2000年度的JavaOne国际会议大厅热闹非凡,一阵阵浓郁的咖啡味儿香气扑鼻.从世界各地汇集到旧金山参加会议的Java精英们兴奋异常,排着长队,等待得到一杯由Java语言控制的咖啡机煮制的免费咖啡. ...