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