教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步《webpack4 系列教程(十二):处理第三方 JavaScript 库》原文地址。或者来我的小站看更多内容:godbmw.com

0. 课程介绍和资料

本节课的代码目录如下:

本节课的package.json内容如下:

  1. {
  2. "dependencies": {
  3. "jquery": "^3.3.1"
  4. },
  5. "devDependencies": {
  6. "webpack": "^4.16.1"
  7. }
  8. }

1. 如何使用和管理第三方JS库?

项目做大之后,开发者会更多专注在业务逻辑上,其他方面则尽力使用第三方JS库来实现。

由于js变化实在太快,所以出现了多种引入和管理第三方库的方法,常用的有 3 中:

  1. CDN:<script></script>标签引入即可
  2. npm 包管理: 目前最常用和最推荐的方法
  3. 本地js文件:一些库由于历史原因,没有提供es6版本,需要手动下载,放入项目目录中,再手动引入。

针对第一种和第二种方法,各有优劣,有兴趣可以看这篇:《CDN 使用心得:加速双刃剑》

针对第三种方法,如果没有webpack,则需要手动引入import或者require来加载文件;但是,webpack提供了alias的配置,配合webpack.ProvidePlugin这款插件,可以跳过手动入,直接使用!

2. 编写入口文件

如项目目录图片所展示的,我们下载了jquery.min.js,放到了项目中。同时,我们也通过npm安装了jquery

为了尽可能模仿生产环境,app.js中使用了$来调用 jq,还使用了jQuery来调用 jq。

因为正式项目中,由于需要的依赖过多,挂载到window对象的库,很容易发生命名冲突问题。此时,就需要重命名库。例如:$就被换成了jQuery

  1. // app.js
  2. $("div").addClass("new");
  3. jQuery("div").addClass("old");
  4. // 运行webpack后
  5. // 浏览器打开 index.html, 查看 div 标签的 class

3. 编写配置文件

webpack.ProvidePlugin参数是键值对形式,键就是我们项目中使用的变量名,值就是键所指向的库。

webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

如果webpack配置了resolve.alias选项(理解成“别名”),那么webpack.ProvidePlugin就会顺着这条链一直找下去。

  1. // webpack.config.js
  2. const path = require("path");
  3. const webpack = require("webpack");
  4. module.exports = {
  5. entry: {
  6. app: "./src/app.js"
  7. },
  8. output: {
  9. publicPath: __dirname + "/dist/",
  10. path: path.resolve(__dirname, "dist"),
  11. filename: "[name].bundle.js",
  12. chunkFilename: "[name].chunk.js"
  13. },
  14. resolve: {
  15. alias: {
  16. jQuery$: path.resolve(__dirname, "src/vendor/jquery.min.js")
  17. }
  18. },
  19. plugins: [
  20. new webpack.ProvidePlugin({
  21. $: "jquery", // npm
  22. jQuery: "jQuery" // 本地Js文件
  23. })
  24. ]
  25. };

4. 结果分析和验证

老规矩,根绝上面配置,先编写一下index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div></div>
  11. <script src="./dist/app.bundle.js"></script>
  12. </body>
  13. </html>

命令行运行webpack进行项目打包:

在 Chrome 中打开index.html。如下图所示,<div>标签已经被添加上了oldnew两个样式类。证明在app.js中使用的$jQuery都成功指向了jquery库。

webpack4 系列教程(十二):处理第三方JavaScript库的更多相关文章

  1. CRL快速开发框架系列教程十二(MongoDB支持)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  2. webpack4 系列教程(十五):开发模式与webpack-dev-server

    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十五):开发模式与 webpack-dev-server>原文地址.更欢迎来我的 ...

  3. webpack4 系列教程(十四):Clean Plugin and Watch Mode

    作者按:因为教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十四):Clean Plugin and Watch Mode>原文地址.更欢迎 ...

  4. 微信程序开发系列教程(二)使用JavaScript给微信用户发送消息

    我之前的文章 微信程序开发系列教程(一)开发环境搭建 介绍了微信开发环境的搭建,这篇文章我们就来一步步开发一些具体的功能. 功能需求:当有微信用户关注了您的公众号之后,您用JavaScript发送一个 ...

  5. Unity3D脚本中文系列教程(十二)

    http://dong2008hong.blog.163.com/blog/static/4696882720140313545332/ GameObject类,继承自Object Unity场景中所 ...

  6. webpack4 系列教程(十): 图片处理汇总

    多图预警!!! 此篇博文共 5 张图(托管在 GitHub),国内用户请移步>>>原文. 或者来我的小站哦 0. 课程源码和资料 本次课程的代码目录(如下图所示): >> ...

  7. Spring Boot系列教程十二:Spring boot集成Redis

    一.创建项目 项目名称为 "springboot_redis",创建过程中勾选 "Web","Redis",第一次创建Maven需要下载依赖 ...

  8. Spring Boot2 系列教程 (十二) | 整合 thymeleaf

    前言 如题,今天介绍 Thymeleaf ,并整合 Thymeleaf 开发一个简陋版的学生信息管理系统. SpringBoot 提供了大量模板引擎,包含 Freemarker.Groovy.Thym ...

  9. webpack4 系列教程(十六):开发模式和生产模式·实战

    好文章 https://www.jianshu.com/p/f2d30d02b719

随机推荐

  1. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

  2. Java中最常用的集合类框架之 HashMap

    一.HashMap的概述 HashMap可以说是Java中最常用的集合类框架之一,是Java语言中非常典型的数据结构.      HashMap是基于哈希表的Map接口实现的,此实现提供所有可选的映射 ...

  3. 一文读懂高性能网络编程中的I/O模型

    1.前言 随着互联网的发展,面对海量用户高并发业务,传统的阻塞式的服务端架构模式已经无能为力.本文(和下篇<高性能网络编程(六):一文读懂高性能网络编程中的线程模型>)旨在为大家提供有用的 ...

  4. 吴恩达机器学习笔记48-降维目标:数据压缩与可视化(Motivation of Dimensionality Reduction : Data Compression & Visualization)

    目标一:数据压缩 除了聚类,还有第二种类型的无监督学习问题称为降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,而且它也让我们 ...

  5. DOS窗口查看端口占用

    背景:最近用tomcat,一直访问不了,要账号密码登录,最后发现问题原因根本是tomcat的默认端口号8080被占用了,下面介绍如何通过dos窗口找到占用端口的进程. 方法: 打开DOS窗口,输入ne ...

  6. 微信小程序的wx-charts插件-tab选项卡

    微信小程序的wx-charts插件-tab选项卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const ...

  7. 微信小程序提交审核并发布详细流程

    微信小程序提交审核并发布详细流程 审核在1小时到N天不等 官方7天,一般3天内 提交审核?如何发布?审核过程中注意事项? 服务器: 域名只支持 https (request.uploadFile.do ...

  8. SpringMVC框架三:参数绑定

    这篇文章整合了SpringMVC和MyBatis: https://www.cnblogs.com/xuyiqing/p/9419144.html 接下来看看参数绑定: 默认Conrtroller可以 ...

  9. java中最常见的几种运行时异常,你get了吗?

    NullPointerException (空指针异常) ClassCastException (类型强制转换异常) NumberFormatException (数字格式异常) NegativeAr ...

  10. Linux的 文件 和 目录 管理

    包括了文件和目录的创建.删除.修改,权限.压缩.搜索.分区.挂载 简单的一些命令: [ pwd ]查看当前所在目录 [ cd .. ]上级目录 [ cd ~ ]当前用户的家目录 [cd -]上次打开目 ...