webpack4 系列教程(十二)：处理第三方JavaScript库

leonardofed 发布于2019-08-23 12:17 / 3061人阅读

摘要：教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十二处理第三方库原文地址。因为正式项目中，由于需要的依赖过多，挂载到对象的库，很容易发生命名冲突问题。会先从安装的包中查找是否有符合的库。证明在中使用的和都成功指向了库。

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

0. 课程介绍和资料

>>>本节课源码

>>>所有课程源码

本节课的代码目录如下：

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

{
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.16.1"
  }
}

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

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

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

CDN：标签引入即可

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：





  
  
  
  Document

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

在 Chrome 中打开index.html。如下图所示，

标签已经被添加上了old和new两个样式类。证明在app.js中使用的$和jQuery都成功指向了jquery库。

云服务器 GPU云服务器 webpack4教程 javascript专题系列 javascript深入系列 a系列处理器gpu

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98256.html

webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4 系列教程: 前言

摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

DevWiki 2019-08-23 10:25 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

赵连江 2019-08-29 16:36 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

superw 2019-08-23 11:40 评论0 收藏0
webpack4 系列教程(三): 多页面解决方案--提取公共代码

摘要：文件配置如下多页面应用注意属性其次打包业务中公共代码首先打包中的文件着重来看配置。个人网站原文链接系列教程三多页面解决方案提取公共代码这节课讲解webpack4打包多页面应用过程中的提取公共代码部分。相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

CarterLi 2019-08-23 10:49 评论0 收藏0