有時(shí)候我們的項(xiàng)目需要用到第三方模塊，最常見(jiàn)的就是引入 jQuery 進(jìn)行一些 DOM 操作。而第三方的模塊引入也有不同的方式。
第一步安裝依賴(lài)：
npm install --save jquery
接下來(lái)一起看看它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>建設(shè)社會(huì)主義中國(guó)</h1>
</div>
)
}
}
上面的輸出結(jié)果：第一個(gè)能正常輸出 jQuery 函數(shù)。第二個(gè)輸出 undefined。為什么呢？
答：
$屬于第三方模塊，引入的時(shí)候因?yàn)殚]包的影響不能暴露給全局，所以全局 windows上沒(méi)有$這個(gè)函數(shù)。
很明顯這種引入方式我們只能在組件里面使用，但是我們?cè)趯?xiě)代碼的時(shí)候不可能只在這一處用到。所以這種方式并不是太好用。
2. expose-loader 全局引入
既然我們想把 jQuery 暴露給全局，那就來(lái)實(shí)現(xiàn)：
先安裝依賴(lài)，借用 expose-loader 來(lái)實(shí)現(xiàn)。
npm install -S expose-loader
expose 使用有兩種方法。
- 方法一：
(App)組件內(nèi)部直接暴露：
import $ from "expose-loader?$!jquery";
- 方法二
在 webpack.config.js 里面進(jìn)行配置：
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$" }
]
}
這時(shí)候在像一一樣在組件內(nèi)部引入，就會(huì)發(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>建設(shè)社會(huì)主義中國(guó)</h1>
</div>
)
}
}
windows.$已經(jīng)輸出結(jié)果和$相同。說(shuō)明 $ 已經(jīng)暴露給全局了。
三、引入webpack 插件
你沒(méi)看錯(cuò)，這個(gè)插件的就是從 webpack 上面引出來(lái)的。providerPlugin 就是提供全局變量。注意這個(gè)東西只是在每個(gè)模塊注入全局變量而已。
使用配置 webpack.config.js ：
const webpack = require("webpack");
plugins: [
new webpack.ProvidePlugin({
$ : 'jquery',
jQuery: 'jquery'
})
]
這時(shí)候我們來(lái)看 App 組件輸出情況：注意這個(gè)沒(méi)有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>建設(shè)社會(huì)主義中國(guó)</h1>
</div>
)
}
}
輸出結(jié)果是： $ === jQuery，windows.$ === undefined，結(jié)果很明顯，我們組件內(nèi)部并沒(méi)有引入 jQuery 包，但是依然能夠打印出 jQuery 函數(shù)，說(shuō)明 providerPlugin 確實(shí)為每個(gè)模塊注入了 jQuery。但是注入的jQuery并不是全局的，所以 windows.$ 或 windows.jQuery 是 undefined。
四、首頁(yè)引入
最后我們來(lái)一個(gè)最原始的方法。首頁(yè) index.html 里面通過(guò) script 標(biāo)簽引入 jQuery CDN 在線(xiàn)加速包。
<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>沖突時(shí)，以我template為準(zhǔn)</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>
毫無(wú)疑問(wèn)，jQuery被暴露給全局了，在組件的任何地方我們都能訪(fǎng)問(wèn)到 jQuery。
但是要注意的是，在全局引入 jQuery 的話(huà)，組件內(nèi)部直接使用就完了，就沒(méi)必要在去：
import $ from "jquery";
如果你再 import 的話(huà)，jQuery 會(huì)被打包，這會(huì)導(dǎo)致打包文件過(guò)大的效果，但是如果你非要這樣的話(huà)，可以設(shè)置 一下 webpack.config.js 。
module.exports = {
externals: {
jquery: '$'
}
}
這樣就不會(huì)重復(fù)打包 jQuery 了。
eternals ：用來(lái)告訴 webpack要構(gòu)建的代碼使用了哪些不用被打包的模塊，這些模塊就是外部環(huán)境提供的，打包時(shí)忽略掉他們。
