專注前端與算法的系列干貨分享冰沙，歡迎關(guān)注(???)：
「微信公眾號(hào)：心譚博客」| xin-tan.com | GitHub
0. 課程介紹和資料
本節(jié)課的代碼目錄如下：
本節(jié)課的package.json內(nèi)容如下：
{
"dependencies": {
"jquery": "^3.3.1"
},
"devDependencies": {
"webpack": "^4.16.1"
}
}
1. 如何使用和管理第三方JS庫拓挥？
項(xiàng)目做大之后，開發(fā)者會(huì)更多專注在業(yè)務(wù)邏輯上当叭，其他方面則盡力使用第三方JS庫來實(shí)現(xiàn)盖灸。
由于js變化實(shí)在太快，所以出現(xiàn)了多種引入和管理第三方庫的方法醉箕，常用的有 3 中：
- CDN：
<script></script>標(biāo)簽引入即可 - npm 包管理： 目前最常用和最推薦的方法
- 本地
js文件：一些庫由于歷史原因徙垫，沒有提供es6版本，需要手動(dòng)下載己英，放入項(xiàng)目目錄中吴旋，再手動(dòng)引入。
針對(duì)第一種和第二種方法荧关，各有優(yōu)劣褂傀，有興趣可以看這篇：《CDN 使用心得：加速雙刃劍》
針對(duì)第三種方法，如果沒有webpack同波，則需要手動(dòng)引入import或者require來加載文件叠国；但是，webpack提供了alias的配置冤狡，配合webpack.ProvidePlugin這款插件，可以跳過手動(dòng)入悲雳，直接使用！
2. 編寫入口文件
如項(xiàng)目目錄圖片所展示的坦胶，我們下載了jquery.min.js晴楔，放到了項(xiàng)目中税弃。同時(shí)，我們也通過npm安裝了jquery则果。
為了盡可能模仿生產(chǎn)環(huán)境，app.js中使用了$來調(diào)用 jq导匣，還使用了jQuery來調(diào)用 jq茸时。
因?yàn)檎巾?xiàng)目中，由于需要的依賴過多缓待，掛載到window對(duì)象的庫渠牲，很容易發(fā)生命名沖突問題。此時(shí)瘫镇，就需要重命名庫答姥。例如：$就被換成了jQuery。
// app.js
$("div").addClass("new");
jQuery("div").addClass("old");
// 運(yùn)行webpack后
// 瀏覽器打開 index.html, 查看 div 標(biāo)簽的 class
3. 編寫配置文件
webpack.ProvidePlugin參數(shù)是鍵值對(duì)形式尚粘，鍵就是我們項(xiàng)目中使用的變量名敲长，值就是鍵所指向的庫秉继。
webpack.ProvidePlugin會(huì)先從npm安裝的包中查找是否有符合的庫泽铛。
如果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ī)矩，根絕上面配置撵幽，先編寫一下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>
命令行運(yùn)行webpack進(jìn)行項(xiàng)目打包：
在 Chrome 中打開index.html盐杂。如下圖所示哆窿，<div>標(biāo)簽已經(jīng)被添加上了old和new兩個(gè)樣式類。證明在app.js中使用的$和jQuery都成功指向了jquery庫强衡。
專注前端與算法的系列干貨分享码荔，歡迎關(guān)注(???)
image
