專注前端與算法的系列干貨分享，歡迎關(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庫(kù)？
項(xiàng)目做大之后，開(kāi)發(fā)者會(huì)更多專注在業(yè)務(wù)邏輯上，其他方面則盡力使用第三方JS庫(kù)來(lái)實(shí)現(xiàn)。
由于js變化實(shí)在太快，所以出現(xiàn)了多種引入和管理第三方庫(kù)的方法，常用的有 3 中：
- CDN：
<script></script>標(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à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. 編寫配置文件
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ī)矩，根絕上面配置，先編寫一下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 中打開(kāi)index.html。如下圖所示，<div>標(biāo)簽已經(jīng)被添加上了old和new兩個(gè)樣式類。證明在app.js中使用的$和jQuery都成功指向了jquery庫(kù)。
專注前端與算法的系列干貨分享，歡迎關(guān)注(???)
image
