資訊專欄INFORMATION COLUMN
摘要：但是，有時候可能的一些庫不夠牛逼，還需要用到的相關(guān)插件來輔助完成，這些插件又和形成了依賴，最終，和我一樣，你也可能需要在中導(dǎo)入。關(guān)于異步打包組件的方案，請看我的其他文章只要你使用了，無論是，還是開發(fā)者也同樣適用這種方案
本文的目的 拒絕全局導(dǎo)入jQuery！！ 拒絕script導(dǎo)入jQuery！！ 找到一種只在當(dāng)前js組件中引入jQuery，并且使用webpack切割打包的方案！ 測試環(huán)境
以下測試在webpack3.8.1，jQuery3.2.1，react16+中進(jìn)行
思路分析如果說要我在react中全局引入jQuery，我是十分感動，然后拒絕的。
但是，有時候可能react的一些庫不夠牛逼，還需要用到j(luò)Query的相關(guān)插件來輔助完成，這些插件又和jQuery形成了依賴，最終，和我一樣，你也可能需要在react中導(dǎo)入jQuery。
這個時候webpack就派上用場了，你也別百度了，網(wǎng)上的方案我試過很多，說句不好聽的，大部分都是樂色！
舉個例子，很多博客說用下面這種方案，還有其他一堆亂七八糟的輔助方案。
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
});
一開始的嘗試，我以為是成功的，因為$可以打印出來了啊！但是，當(dāng)我打印jQuery的時候，報錯了!!
jQuery is not defined
接著，就是一個漫長的探索過程，我以為是CMD的鍋、我以為是AMD的鍋、我還以為是ES6的鍋、甚至我堅定的認(rèn)為是webpack的鍋！！
最終答案最終我發(fā)現(xiàn)就是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組件中導(dǎo)入jQuery
import React from "react"
require("jquery")
require("jQuery第三方插件")
class Components extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
$(document).ready(function() {
//做愛做的事情
})
}
}
4、這里可能還存在一個小坑，就是很多jQuery第三方插件的作者寫的代碼不規(guī)范，我就遇到了一些變量沒有聲明的情況，在那些老程序員眼里，js變量不聲明表示全局變量，但在webpack眼里，你不聲明就未定義了！如果你遇到j(luò)Query插件未定義的報錯，通常給這個變量加上var就行了！
5、最后，我自己寫的組件本身已經(jīng)融入了異步打包功能，所以當(dāng)前包含jQuery的react組件不會污染其他react組件，不會導(dǎo)致其他組件的體積變大，也不會導(dǎo)致公共js的體積變化，前提是你也實現(xiàn)了react組件的異步加載功能。
6、關(guān)于webpack異步打包組件的方案，請看我的其他文章！
只要你使用了webpack，無論是react，還是vue開發(fā)者也同樣適用這種方案文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89937.html
摘要：配置過程基本的入口出口配置入口輸出目錄這里使用方法是為了消除跨平臺的差異因為和的絕對路徑表示方式不一樣添加基本的加載器導(dǎo)入中加入對象使用的目標(biāo)文件。 webpack配置過程 基本的入口出口配置 const webpack = require(webpack); const path = require(path); module.exports = { entry: { m...
摘要：澄清一個共同的誤解代碼分離不僅僅是抽出公共代碼把它們放進(jìn)一個共享的塊中。讓我們來使用來移除這個重復(fù)的部分。插件將會注意到我們已經(jīng)將分割成一個單獨的塊。并且從我們的主中刪除了這部分。 對于大型web app來說，如果把所有的文件都打包到一個文件中是非常低效的，特別是當(dāng)一些代碼塊只在某些特定的條件下被調(diào)用。webpack可以讓你的代碼庫分割成不同的塊(chucks),僅僅在需要的時候再加載...
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化，然后為你執(zhí)行一系列的自動化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代，大家可能...
摘要：在默認(rèn)情況下，僅僅影響按需加載的代碼塊，因為更改初始塊會影響文件應(yīng)包含的腳本標(biāo)記以運行項目。屬性用來選擇分割哪些代碼塊，可選值有所有代碼塊，按需加載的代碼塊，初始化代碼塊。 1.?SplitChunksPlugin的概念 起初，chunks(代碼塊)和導(dǎo)入他們中的模塊通過webpack內(nèi)部的父子關(guān)系圖連接.在webpack3中，通過CommonsChunkPlugin來避免他們之間的依...
閱讀 2287·2021-11-10 11:35
閱讀 899·2021-09-26 09:55
閱讀 2388·2021-09-22 15:22
閱讀 2318·2021-09-22 15:17
閱讀 3683·2021-09-09 09:33
閱讀 1821·2019-08-30 11:22
閱讀 970·2019-08-30 10:57
閱讀 641·2019-08-29 16:10
