# 16. 使用 ProvidePlugin 插件來處理像 jQuery 這樣的第三方包 怎么在項目中引用 jQuery 這樣的庫呢？ 想一想，只要在 js 文件里，像 `import React from 'react'` 這樣來處理應該就可以，我們來試一下。 首先，安裝 jquery。 ``` # 注意這里是 --save 而不是 --save-dev，因為要在線上環境上用 jquery $ npm install --save jquery ``` 接下來來使用 jquery。 **src/app.js** ``` javascript import 'jquery'; // 在 html 中應該有 id 為 "hello" 的元素吧，這點相信大家都懂的。 // 這一行作用是把元素的內容改成 "change to other text" $("#hello").text('change to other text'); ``` 遺憾地告訴你，報錯了！  雖然 `import` 了，但是編譯的時候，找不到 `$` 這個標識符。 我們來改進一下： **src/app.js** ``` javascript import $ from 'jquery'; $("#hello").text('change to other text'); ```  效果出來。 沒啥問題，但這不是我們這篇文章要講的主要內容。 我們考慮一種情況，跟上面的不太一樣，你可能會使用各種 jquery 插件。 我們來試試吧，通過實例來體驗。 我們來隨便寫一個簡單的 jquery 插件。 **src/jquery.changeStyle.js** ``` javascript $.fn.changeStyle = function(colorStr){ this.css("color", colorStr); } ``` 這個插件很簡單，只是改變元素的顏色。 怎么來引用和使用呢？ 跟之前類似。 **src/app.js** ``` javascript import $ from 'jquery'; import './jquery.changeStyle'; $("#hello").text('change to other text'); // 把元素改成紫色 $("#hello").changeStyle('pink'); ``` 報錯了，跟之前報的錯一樣。 ``` Uncaught ReferenceError: $ is not defined ``` 說是 `$` 沒定義，可是我們 `import` 了呀。 那把 `import './jquery.changeStyle';` 改成 `import changeStyle from './jquery.changeStyle';` 試一下。 還是沒什么卵用。 `src/jquery.changeStyle.js` 文件引用了 jquery 這個插件，可是外面 `src/app.js` 卻不知道。 我們來改一下 `src/jquery.changeStyle.js` 文件的內容。 **src/jquery.changeStyle.js** ``` javascript import $ from 'jquery'; $.fn.changeStyle = function(colorStr){ this.css("color", colorStr); } ```  效果出來了，這樣是可以的。 但是有一個問題啊，上面的 jquery 插件是我們自己隨意寫的，我們想怎么改都可以，如果是第三方的呢，就是說你有可能從網上下載一個別人寫好的。 這個時候，你總不能下載后，再來改吧。 我們怎么做呢？ 這個時候要引入 webpack 的一個插件：[ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/)。 這個插件可以有這樣的效果。 **不必通過 import/require 使用模塊** 把剛才的 **src/jquery.changeStyle.js** 還原一下。 **src/jquery.changeStyle.js** ``` javascript $.fn.changeStyle = function(colorStr){ this.css("color", colorStr); } ``` 接下來： **webpack.config.js** ``` javascript module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), ... ] } ``` 什么意思呢？很容易理解，以后要遇到或處理 `jQuery` 或 `$` 都會去自動加載 jquery 這個庫。 現在我們運行一下 `npm run dev`，效果出來了。  這個插件不止可以處理 jquery，還可以處理別的庫，等你慢慢用它吧。 就先到這。