資訊專欄INFORMATION COLUMN
摘要：教程所示圖片使用的是倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步系列教程十二處理第三方庫(kù)原文地址。因?yàn)檎巾?xiàng)目中，由于需要的依賴過(guò)多，掛載到對(duì)象的庫(kù)，很容易發(fā)生命名沖突問(wèn)題。會(huì)先從安裝的包中查找是否有符合的庫(kù)。證明在中使用的和都成功指向了庫(kù)。
教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步《webpack4 系列教程(十二)：處理第三方 JavaScript 庫(kù)》原文地址?；蛘邅?lái)我的小站看更多內(nèi)容：godbmw.com0. 課程介紹和資料
>>>本節(jié)課源碼
>>>所有課程源碼
本節(jié)課的代碼目錄如下：
本節(jié)課的package.json內(nèi)容如下：
{
"dependencies": {
"jquery": "^3.3.1"
},
"devDependencies": {
"webpack": "^4.16.1"
}
}
1. 如何使用和管理第三方JS庫(kù)？
項(xiàng)目做大之后，開(kāi)發(fā)者會(huì)更多專注在業(yè)務(wù)邏輯上，其他方面則盡力使用第三方JS庫(kù)來(lái)實(shí)現(xiàn)。
由于js變化實(shí)在太快，所以出現(xiàn)了多種引入和管理第三方庫(kù)的方法，常用的有 3 中：
CDN：標(biāo)簽引入即可
npm 包管理： 目前最常用和最推薦的方法
本地js文件：一些庫(kù)由于歷史原因，沒(méi)有提供es6版本，需要手動(dòng)下載，放入項(xiàng)目目錄中，再手動(dòng)引入。
針對(duì)第一種和第二種方法，各有優(yōu)劣，有興趣可以看這篇：《CDN 使用心得：加速雙刃劍》
針對(duì)第三種方法，如果沒(méi)有webpack，則需要手動(dòng)引入import或者require來(lái)加載文件；但是，webpack提供了alias的配置，配合webpack.ProvidePlugin這款插件，可以跳過(guò)手動(dòng)入，直接使用！
2. 編寫(xiě)入口文件如項(xiàng)目目錄圖片所展示的，我們下載了jquery.min.js，放到了項(xiàng)目中。同時(shí)，我們也通過(guò)npm安裝了jquery。
為了盡可能模仿生產(chǎn)環(huán)境，app.js中使用了$來(lái)調(diào)用 jq，還使用了jQuery來(lái)調(diào)用 jq。
因?yàn)檎巾?xiàng)目中，由于需要的依賴過(guò)多，掛載到window對(duì)象的庫(kù)，很容易發(fā)生命名沖突問(wèn)題。此時(shí)，就需要重命名庫(kù)。例如：$就被換成了jQuery。
// app.js
$("div").addClass("new");
jQuery("div").addClass("old");
// 運(yùn)行webpack后
// 瀏覽器打開(kāi) index.html, 查看 div 標(biāo)簽的 class
3. 編寫(xiě)配置文件
webpack.ProvidePlugin參數(shù)是鍵值對(duì)形式，鍵就是我們項(xiàng)目中使用的變量名，值就是鍵所指向的庫(kù)。
webpack.ProvidePlugin會(huì)先從npm安裝的包中查找是否有符合的庫(kù)。
如果webpack配置了resolve.alias選項(xiàng)（理解成“別名”），那么webpack.ProvidePlugin就會(huì)順著這條鏈一直找下去。
// 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. 結(jié)果分析和驗(yàn)證
老規(guī)矩，根絕上面配置，先編寫(xiě)一下index.html：
Document
命令行運(yùn)行webpack進(jìn)行項(xiàng)目打包：
在 Chrome 中打開(kāi)index.html。如下圖所示， 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98256.html標(biāo)簽已經(jīng)被添加上了old和new兩個(gè)樣式類。證明在app.js中使用的$和jQuery都成功指向了jquery庫(kù)。
摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開(kāi)放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開(kāi)源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...
摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識(shí)點(diǎn)，目錄分成了個(gè)文件夾之后還會(huì)持續(xù)更新。個(gè)人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過(guò)時(shí)，最近內(nèi)容請(qǐng)看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開(kāi)發(fā)者可以輕松地實(shí)現(xiàn)加密代碼、多平臺(tái)兼容。而最重要的...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步 原文地址 有空就來(lái)看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過(guò)慢的朋友請(qǐng)移步 原文地址 有空就來(lái)看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：文件配置如下多頁(yè)面應(yīng)用注意屬性其次打包業(yè)務(wù)中公共代碼首先打包中的文件著重來(lái)看配置。個(gè)人網(wǎng)站原文鏈接系列教程三多頁(yè)面解決方案提取公共代碼 這節(jié)課講解webpack4打包多頁(yè)面應(yīng)用過(guò)程中的提取公共代碼部分。相比于webpack3，4.0版本用optimization.splitChunks配置替換了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...
閱讀 1445·2021-09-30 09:55
閱讀 1962·2021-08-27 13:10
閱讀 2308·2019-08-29 17:22
閱讀 1370·2019-08-29 16:30
閱讀 3545·2019-08-26 18:37
閱讀 2412·2019-08-26 11:47
閱讀 1223·2019-08-23 14:44
閱讀 1800·2019-08-23 13:46
