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

leonardofed 發布于2019-08-23 12:17 / 3083人閱讀

摘要：教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步系列教程十二處理第三方庫原文地址。因為正式項目中，由于需要的依賴過多，掛載到對象的庫，很容易發生命名沖突問題。會先從安裝的包中查找是否有符合的庫。證明在中使用的和都成功指向了庫。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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