有時候我們的項目需要用到第三方模塊饿敲，最常見的就是引入 jQuery 進行一些 DOM 操作冈爹。而第三方的模塊引入也有不同的方式涌攻。
第一步安裝依賴：
npm install --save jquery
接下來一起看看它jquery的引用方式和他們之間的區(qū)別。
1. 組件內(nèi)部引用
import $ from "jquery";
例如在 React 環(huán)境的 App 組件犯助。
import React, { Component } from "react";
import $ from "jquery";
export default class App extends Component {
constructor(){
super()
}
render() {
console.log($);
console.log(window.$);
return (
<div>
<h1>建設社會主義中國</h1>
</div>
)
}
}
上面的輸出結果：第一個能正常輸出 jQuery 函數(shù)癣漆。第二個輸出 undefined。為什么呢剂买？
答：
$屬于第三方模塊惠爽，引入的時候因為閉包的影響不能暴露給全局，所以全局 windows上沒有$這個函數(shù)瞬哼。
很明顯這種引入方式我們只能在組件里面使用婚肆，但是我們在寫代碼的時候不可能只在這一處用到。所以這種方式并不是太好用坐慰。
2. expose-loader 全局引入
既然我們想把 jQuery 暴露給全局较性，那就來實現(xiàn)：
先安裝依賴，借用 expose-loader 來實現(xiàn)结胀。
npm install -S expose-loader
expose 使用有兩種方法赞咙。
- 方法一：
(App)組件內(nèi)部直接暴露：
import $ from "expose-loader?$!jquery";
- 方法二
在 webpack.config.js 里面進行配置：
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$" }
]
}
這時候在像一一樣在組件內(nèi)部引入，就會發(fā)現(xiàn)：
import React, { Component } from "react";
import $ from "jquery";
export default class App extends Component {
constructor(){
super()
}
render() {
console.log($);
console.log(window.$);
return (
<div>
<h1>建設社會主義中國</h1>
</div>
)
}
}
windows.$已經(jīng)輸出結果和$相同糟港。說明 $ 已經(jīng)暴露給全局了攀操。
三、引入webpack 插件
你沒看錯秸抚，這個插件的就是從 webpack 上面引出來的速和。providerPlugin 就是提供全局變量歹垫。注意這個東西只是在每個模塊注入全局變量而已。
使用配置 webpack.config.js ：
const webpack = require("webpack");
plugins: [
new webpack.ProvidePlugin({
$ : 'jquery',
jQuery: 'jquery'
})
]
這時候我們來看 App 組件輸出情況：注意這個沒有import $ from "jquery"颠放。
import React, { Component } from "react";
export default class App extends Component {
constructor(){
super()
}
render() {
console.log($);
console.log(jQuery);
console.log(window.$);
return (
<div>
<h1>建設社會主義中國</h1>
</div>
)
}
}
輸出結果是： $ === jQuery排惨，windows.$ === undefined，結果很明顯碰凶，我們組件內(nèi)部并沒有引入 jQuery 包暮芭，但是依然能夠打印出 jQuery 函數(shù)，說明 providerPlugin 確實為每個模塊注入了 jQuery痒留。但是注入的jQuery并不是全局的谴麦，所以 windows.$ 或 windows.jQuery 是 undefined。
四伸头、首頁引入
最后我們來一個最原始的方法匾效。首頁 index.html 里面通過 script 標簽引入 jQuery CDN 在線加速包。
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沖突時恤磷，以我template為準</title>
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
<!-- 注意jQuery的在 div.id 之前引入 -->
<div id = "app"></div>
</body>
</html>
毫無疑問面哼，jQuery被暴露給全局了，在組件的任何地方我們都能訪問到 jQuery扫步。
但是要注意的是魔策，在全局引入 jQuery 的話，組件內(nèi)部直接使用就完了河胎，就沒必要在去：
import $ from "jquery";
如果你再 import 的話闯袒，jQuery 會被打包，這會導致打包文件過大的效果游岳，但是如果你非要這樣的話政敢，可以設置 一下 webpack.config.js 。
module.exports = {
externals: {
jquery: '$'
}
}
這樣就不會重復打包 jQuery 了胚迫。
eternals ：用來告訴 webpack要構建的代碼使用了哪些不用被打包的模塊喷户，這些模塊就是外部環(huán)境提供的，打包時忽略掉他們访锻。
