webpack4 系列教程(十二)：處理第三方JavaScript庫

-Advertisement-

教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步 "《webpack4 系列教程(十二)：處理第三方 JavaScript 庫》原文地址" 。或者來我的小站看更多內容： "godbmw.com" 0. 課程介紹和資料 " 本節課源碼" " 所有課程源碼" 本節課的代碼目錄如下：本 ...

教程所示圖片使用的是 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庫。

您的分享是我們最大的動力!