欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-11 14:59:03
教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步 "《webpack4 系列教程(十二):处理第三方 JavaScript 库》原文地址" 。或者来我的小站看更多内容: "godbmw.com" 0. 课程介绍和资料 " 本节课源码" " 所有课程源码" 本节课的代码目录如下: 本 ......

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

0. 课程介绍和资料

本节课的代码目录如下:

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

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

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

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

// 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进行项目打包:

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

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

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