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提供了另一種支持方案。

一、安裝expose-loader

npm install --save expose-loader

二、在webpack.config中加入下面這段loader代碼

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

三、下面該幹嗎？放心，你什麼都不用幹了，接着很輕鬆的在你的react組件中導入jQuery

import React from 'react' require('jquery') require('jQuery第三方插件') class Components extends React.Component { constructor(props) { super(props) } componentDidMount() { $(document).ready(function() { //作愛作的事情 }) } } 

四、這裏可能還存在一個小坑，就是不少jQuery第三方插件的做者寫的代碼不規範，我就遇到了一些變量沒有聲明的狀況，在那些老程序員眼裏，js變量不聲明表示全局變量，但在webpack眼裏，你不聲明就未定義了！若是你遇到jQuery插件未定義的報錯，一般給這個變量加上var就好了！

五、最後，我本身寫的組件自己已經融入了異步打包功能，因此當前包含jQuery的react組件不會污染其餘react組件，不會致使其餘組件的體積變大，也不會致使公共js的體積變化，前提是你也實現了react組件的異步加載功能。

六、關於webpack異步打包組件的方案，請看個人其餘文章！

只要你使用了webpack，不管是react，仍是vue開發者也一樣適用這種方案

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