詳解webpack引用jquery（第三方模塊）的三種辦法
前言
在使用webpack作為構(gòu)建工具，開發(fā) vue項(xiàng)目的時(shí)候，難免會(huì)用到 jquery這種第三方插件（畢竟都是從用jquery過來的），那么怎么引用呢？接下來我來說三種方法。
1 html 模板文件引用法，這種方法最直接也是我們最熟悉，直接在項(xiàng)目中的網(wǎng)頁模板文件中加入jquery的引用即可
a.引用
b.使用
2 expose-loader 引用法
a. 安裝jquery
npm i jquery -D
b. main.js中引用 jquery
import Vue from 'vue'
import App from './App'
import router from './router'
import $ from 'jquery'//加入此行
Vue.config.productionTip = false
console.warn("==============main.js輸出$對(duì)象======================");
console.log($);
console.log(window.$);
說明 此時(shí)我們會(huì)發(fā)現(xiàn)，main.js中我們引用了 jquery，$符號(hào)我們可以正常使用，但 window.$卻不能，而且 helloWorld這個(gè)組件中也引用不到$；為什么呢？因?yàn)閣ebpack是最后會(huì)把代碼用閉包的方式打包，$對(duì)象并沒有掛載在window下，helloWorld這個(gè)組件中并沒有引用jquery所以它自然是拿不到的，那么怎么能做到在main.js中一次引用，每個(gè)組件都能拿到呢？
c. expose-loader將 jquery暴露至全局
1) 安裝 expose-loader
npm i expose-loader -D
2) webpack.config.js（vue-cli 創(chuàng)建的項(xiàng)目可在 webpack.base.conf.js）中配置當(dāng)引用 jquery 時(shí)使用 expose-loader
......
module: {
rules: [
//增加以下配置即可
{
test: require.resolve('jquery'),
loader: 'expose-loader?$'
},
.....
3 webpack插件法，給每個(gè)模塊注入$
webpack.config.js（vue-cli 創(chuàng)建的項(xiàng)目可在 webpack.base.conf.js）
中配置
引用 webpack
const webpack = require('webpack')
配置插件
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
})
]
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用JavaScript快速創(chuàng)建一個(gè)1到100的數(shù)組
平時(shí)寫代碼時(shí),我們會(huì)生產(chǎn)一些測(cè)試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個(gè)1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下2022-08-08
js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法
這篇文章主要介紹了js下拉選擇框與輸入框聯(lián)動(dòng)實(shí)現(xiàn)添加選中值到輸入框的方法,涉及javascript中onchange事件及頁面元素遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
解決遍歷時(shí)Array.indexOf產(chǎn)生的性能問題
javascript中數(shù)組是沒有indexOf方法，extjs中給數(shù)據(jù)添加了該方法2012-07-07
關(guān)于Javascript中document.cookie的使用
這篇文章主要介紹了關(guān)于Javascript中document.cookie的使用,通過cookie來記住密碼保存密碼功能，需要的朋友可以參考下2017-03-03
js強(qiáng)制把網(wǎng)址設(shè)為默認(rèn)首頁
有時(shí)候你會(huì)發(fā)現(xiàn)設(shè)首頁為失效，那么來一個(gè)js強(qiáng)制設(shè)置首頁的代碼，不過為了綠色上網(wǎng)，盡量不要強(qiáng)迫你的用戶意志，弄不好網(wǎng)站用戶體驗(yàn)會(huì)降低。感興趣的小伙伴可以參考一下2015-09-09
javascript oop開發(fā)滑動(dòng)(slide)菜單控件
這里因?yàn)槭茄菔舅宰孒TML CSS盡量的簡化，另外使用jquery的 fn.slideUp fn.slideDown 實(shí)現(xiàn)起來會(huì)更容易不過我作為一個(gè)專業(yè)的開發(fā)者多了解些原生的JS對(duì)技術(shù)的提高還是很有幫助。2010-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序slider組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
uniapp上傳二進(jìn)制圖片的實(shí)現(xiàn)
本文主要介紹了uniapp上傳二進(jìn)制圖片的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要給大家介紹了關(guān)于JavaScript中Map遍歷方法的相關(guān)資料,Map是一組鍵值對(duì)的結(jié)構(gòu),具有極快的查找速度,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了JS設(shè)計(jì)模式之單例模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09