webpack4導入jQuery的新方案

本文的目的

拒絕全局導入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開發者也同樣適用這種方案

本人引用地址：https://segmentfault.com/a/1190000012112912