webpack系列——webpack3匯入jQuery的新方案

二月發表於2017-11-22
WebjQuery

本文的目的

拒絕全域性匯入jQuery！！

拒絕script匯入jQuery！！

找到一種只在當前js元件中引入jQuery，並且使用webpack切割打包的方案！

測試環境

以下測試在webpack3.8.1，jQuery3.2.1，react16+中進行

思路分析

如果說要我在react中全域性引入jQuery，我是十分感動，然後拒絕的。

但是，有時候可能react的一些庫不夠牛逼，還需要用到jQuery的相關外掛來輔助完成，這些外掛又和jQuery形成了依賴，最終，和我一樣，你也可能需要在react中匯入jQuery。

這個時候webpack就派上用場了，你也別百度了，網上的方案我試過很多，說句不好聽的，大部分都是樂色！

舉個例子，很多部落格說用下面這種方案，還有其他一堆亂七八糟的輔助方案。

new webpack.ProvidePlugin({
    $: `jquery`,
    jQuery: `jquery`,
    `window.jQuery`: `jquery`,
    `window.$`: `jquery`,
  });

一開始的嘗試，我以為是成功的，因為$可以列印出來了啊！但是，當我列印jQuery的時候，報錯了!!

jQuery is not defined

接著，就是一個漫長的探索過程，我以為是CMD的鍋、我以為是AMD的鍋、我還以為是ES6的鍋、甚至我堅定的認為是webpack的鍋！！

最終答案

最終我發現就是webpack的鍋，幸好webpack提供了另外一種支援方案。

1、安裝expose-loader

npm install --save expose-loader

2、在webpack.config中加入下面這段loader程式碼

{
   test: require.resolve(`jquery`),
   use: [{
      loader: `expose-loader`,
      options: `jQuery`
   },{
      loader: `expose-loader`,
      options: `$`
   }]
}

3、下面該幹嘛？放心，你什麼都不用幹了，接著很輕鬆的在你的react元件中匯入jQuery

import React from `react`

require(`jquery`)
require(`jQuery第三方外掛`)

class Components extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
         $(document).ready(function() {
            //做愛做的事情
        })
    }
}

4、這裡可能還存在一個小坑，就是很多jQuery第三方外掛的作者寫的程式碼不規範，我就遇到了一些變數沒有宣告的情況，在那些老程式設計師眼裡，js變數不宣告表示全域性變數，但在webpack眼裡，你不宣告就未定義了！如果你遇到jQuery外掛未定義的報錯，通常給這個變數加上var就行了！

5、最後，我自己寫的元件本身已經融入了非同步打包功能，所以當前包含jQuery的react元件不會汙染其他react元件，不會導致其他元件的體積變大，也不會導致公共js的體積變化，前提是你也實現了react元件的非同步載入功能。

6、關於webpack非同步打包元件的方案，請看我的其他文章！

只要你使用了webpack，無論是react，還是vue開發者也同樣適用這種方案

相關文章