詳解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）中配置當(dāng)引用 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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
眾所周知，我們web開發(fā)人員痛恨IE瀏覽器，因為IE不支持標(biāo)準(zhǔn)，標(biāo)準(zhǔn)外的默認(rèn)行為又和其他瀏覽器經(jīng)常不一致，所以我們在做項目的時候，經(jīng)常需要專門針對IE來做些文章，當(dāng)然對于referer也不例外，今天我們就來看下如何讓referer兼容主流瀏覽器2014-11-11
JS實現(xiàn)聯(lián)想、自動補齊國家或地區(qū)名稱的功能
這篇文章主要介紹了JS實現(xiàn)聯(lián)想、自動補齊國家或地區(qū)名稱的功能，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了Js與下拉列表處理問題,需要的朋友可以參考下2014-02-02
關(guān)于TypeScript中import JSON的正確姿勢詳解
2012年10月首度對外公布typescript（當(dāng)時已經(jīng)是0.7？的版本）同時開源，ts的編譯器是用js編寫的（后來改成ts？），可以在線編寫。下面這篇文章主要給大家介紹了關(guān)于TypeScript中import JSON的正確姿勢，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了詳解Javascript繼承的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-03-03
Javascript數(shù)組及類數(shù)組相關(guān)原理詳解
這篇文章主要介紹了Javascript數(shù)組及類數(shù)組相關(guān)原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
跟我學(xué)Nodejs（三）--- Node.js模塊
這是本系列的第三篇文章了，前面2篇網(wǎng)友們反饋回來不少的消息，加上最近2天比較忙，一直沒來得及整理，周末了，趕緊給大家整理下發(fā)出來，本文講的是node.js模塊2014-05-05
javascript html實現(xiàn)網(wǎng)頁版日歷代碼
這篇文章主要介紹了javascript html實現(xiàn)網(wǎng)頁版日歷代碼,需要的朋友可以參考下2016-03-03
javascript動態(tài)添加單元格的腳本代碼...2007-11-11
事件委托是指將一個事件處理程序綁定到父元素上,而不是直接綁定到每個子元素上,下面就跟隨小編一起來了解一下JavaScript是如何處理事件委托的吧2024-12-12