什麼是 ProvidePlugin
ProvidePlugin 是基於 webpack 裡的一個設定方法，可以用來指定變數讓 JS 套件模組運作於 webpack 下使用，但無法在全域下使用。
ProvidePlugin 在 webpack 內以模組方式使用與全域執行的情形
jQuery 與 axios 的 JS 套件，在全域下的使用情形
將 jQuery 直接在 index.html 的 HTML 頁面將 jQuery 透過 <script src="jquery.js"></script> 方置到注入點 index.js 的方上，這樣的方式會讓 jQuery 變成一個全域物件，也就會在瀏覽器下直接輸入 $ 下方取到 jQuery 的物件。
在這裡要了解沒經模組化，將 JS 套件直接於全域下以 src 的方式引入情形，先進到 webpack 中把所有透過 import <自定模組變數名> from '<模組名>' 加入模組的套件先註解起來不使用。
直接在 index.html 的 </body> 結尾標籤處，在 <script src="./js/index.js"></script> 的 webpack 注入點前方加上下面 CDN，來執行看看二個掛載於全域下的情形。
1 2 | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> |
接著在 index.js 中的最後方，加入下面的程式碼，查看 JS 套件引入的情形。
1 2 3 4 | console.log('jQuery 變數 $', $); // jQuery 變數 $ ƒ (e,t){return new S.fn.init(e,t)} console.log('jQuery 變數 jQuery', jQuery); // jQuery引入後變數.html:14 jQuery 變數 jQuery ƒ (e,t){return new S.fn.init(e,t)} console.log('jQuery 變數 window.jQuery', window.jQuery); // jQuery引入後變數.html:15 jQuery 變數 window.jQuery ƒ (e,t){return new S.fn.init(e,t)} console.log('axios', axios); // axios ƒ (){for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];return e.apply(t,n)} |
在 $、 jQuery、 window.jQuery 這三個物件，也都是表示 jQuery 物件本身，直接掛於 window 的 $ 物件之下來使用，在成功引入 jQuery 時可以透過下面三個 console.log() 取得 jQuery 物件。
另外 axios 也是一樣的概念，使用 axios 會直接回應是一個函式。
以上就是二個套件在引入 JS 套件後，全域下透過 console.log() 取用情形，另外在瀏覽器開發工具上直接輸入 $、 jQuery、 window.jQuery 或是 axios 也會一樣直接對應上的結果。
使用 webpack 的 ProvidePlugin 設定，在模組裡與全域下的使用情形
webpack 在注入點多或元件多的情形下使用與設定的麻煩
在使用 webpack 進行開發使用模組，像是使用到 jQuery 來說，就需要在注入點 index.js 檔中輸入 import $ from 'jquery' 將模組引入使用。
以模組化的使用優點來說，就是在要使用時才透過 import <自定模組變數名> from '<模組名>' 的方式將模組引入使用。
這裡不使用前面直接在 index.html 檔直接把 jQuery 與 axios 透過 CDN 引入為全域物件的方式，先把 CDN 註解起來接著下面的操作。
再以使用 axios 的方式來說在多加上 import axios from 'axios' 引入使用，另外若要在加上 swiper 的概念也是一樣。
這樣的引用模組方式，在注入點多或是元件多的情形下使用上也會變的很麻煩，每個部份都要引入相關的模組進來使用。
透過 ProvidePlugin 指定 JS 套件於變數名稱，讓所有的 .js 與元件一次設定下共用
接下來要進行以 jQuery 的模組設定，先將 npm 中加入 jQuery 與 axios，這裡要使用會是上線後的生產模組還要用到 jQuery 與 axios 所以要使用 --save 而不是使用開發模組，不用在後方加上 -dev。
1 | npm run i jquery axios -S |
透過 webpack 的功能 ProvidePlugin 來設定，就可以讓每支 js 檔，以不用 import 引入第三方套件的方式。
設定內容如下。
1 2 3 4 5 6 7 8 | plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', axios: 'axios', }), ] |
以下說明在 ProvidePlugin 的設定方式，是直接在 plugins: [] 裡以 new webpack.ProvidePlugin() 中帶入一個物件 {} 來說定，物件中的屬性名稱都可用來在 webpack 中使用所表示的引用的套件名，以上面的設定來說就分別是 $ jQuery window.jQuery 設定三組，當然也可以自已另外命一個名稱自定義，以 axios: 'axios' 就是將 axios 模組指定變數為 axios。
接著在 index.js 的注入點透過 console.log($(‘#box1’)) 查看 jQuery 取 DOM 元素的結果。
使用指令 npm run dev 啟用 webpack-dev-server 查看執行結果。
瀏覽器往啟後查看後會取得訊息如下，這樣就表非 jQuery 是在全域的設定下取得 #box1 的位置。
$ jQuery window.jQuery 設定三組和 jQuery 本身在全域的使用名稱一樣，但透過 webpack 包進模組後，無法直接在 window 下直接取得，所以需要在 webpack 裡設定變數名稱，指定在模組內以變數名取用引入的 JS 套件的模組。
如何証明 axios 與 jQuery 不是全域物件呢。
在瀏覽器直接輸入 axios 與 jQuery 與 window.jQuery，在 global (全域) 上無法取得 jQuery 的物件，這樣就是透過 webpack 把 JS 套件透過模組直接包進來，外層的 window 呼叫不到。
前面是在 index.js 注入點執行 console.log() 的 jQuery 與 axios 呼叫與執行 AJAX 正常，而後方是直接在瀏覽器的全域下的呼叫， window 下找不到對應的套件出來。
ProvidePlugin 的設定，在 webpack 裡失去了透過模組化 js 的好處了，會有不好除錯的情形產生
1. 你會無法得知哪個 js 組件引入了那些 lib
2. 當組件出現bug時我們無法得知是第三方套件問題還是自己問題
很重要說所以說三次
非必要盡量不要使用 ProvidePlugin 這個做法!!!
非必要盡量不要使用 ProvidePlugin 這個做法!!!
非必要盡量不要使用 ProvidePlugin 這個做法!!!
Comments are closed.