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

时间 2020-02-11

标签 webpack4 webpack 系列教程十二处理第三方 javascript 栏目 JavaScript 繁體版

原文原文链接

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

0. 课程介绍和资料

本节课的代码目录以下：javascript

本节课的package.json内容以下：html

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

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

项目作大以后，开发者会更多专一在业务逻辑上，其余方面则尽力使用第三方JS库来实现。java

因为js变化实在太快，因此出现了多种引入和管理第三方库的方法，经常使用的有 3 中：jquery

CDN：<script></script>标签引入便可
npm 包管理：目前最经常使用和最推荐的方法
本地js文件：一些库因为历史缘由，没有提供es6版本，须要手动下载，放入项目目录中，再手动引入。

针对第一种和第二种方法，各有优劣，有兴趣能够看这篇：《CDN 使用心得：加速双刃剑》webpack

针对第三种方法，若是没有webpack，则须要手动引入import或者require来加载文件；可是，webpack提供了alias的配置，配合webpack.ProvidePlugin这款插件，能够跳过手动入，直接使用！git

2. 编写入口文件

如项目目录图片所展现的，咱们下载了jquery.min.js，放到了项目中。同时，咱们也经过npm安装了jquery。es6

为了尽量模仿生产环境，app.js中使用了$来调用 jq，还使用了jQuery来调用 jq。github

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

// app.js
$("div").addClass("new");

jQuery("div").addClass("old");

// 运行webpack后
// 浏览器打开 index.html, 查看 div 标签的 class

3. 编写配置文件

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

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