詳解webpack引用jquery（第三方模塊）的三種辦法
前言
在使用webpack作為構(gòu)建工具，開(kāi)發(fā) vue項(xiàng)目的時(shí)候，難免會(huì)用到 jquery這種第三方插件（畢竟都是從用jquery過(guò)來(lái)的），那么怎么引用呢？接下來(lái)我來(lái)說(shuō)三種方法。
1 html 模板文件引用法，這種方法最直接也是我們最熟悉，直接在項(xiàng)目中的網(wǎng)頁(yè)模板文件中加入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.$);
說(shuō)明 此時(shí)我們會(huì)發(fā)現(xiàn)，main.js中我們引用了 jquery，$符號(hào)我們可以正常使用，但 window.$卻不能，而且 helloWorld這個(gè)組件中也引用不到$；為什么呢？因?yàn)閣ebpack是最后會(huì)把代碼用閉包的方式打包，$對(duì)象并沒(méi)有掛載在window下，helloWorld這個(gè)組件中并沒(méi)有引用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",
})
]
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
眾所周知，我們web開(kāi)發(fā)人員痛恨IE瀏覽器，因?yàn)镮E不支持標(biāo)準(zhǔn)，標(biāo)準(zhǔn)外的默認(rèn)行為又和其他瀏覽器經(jīng)常不一致，所以我們?cè)谧鲰?xiàng)目的時(shí)候，經(jīng)常需要專(zhuān)門(mén)針對(duì)IE來(lái)做些文章，當(dāng)然對(duì)于referer也不例外，今天我們就來(lái)看下如何讓referer兼容主流瀏覽器2014-11-11
JS實(shí)現(xiàn)聯(lián)想、自動(dòng)補(bǔ)齊國(guó)家或地區(qū)名稱(chēng)的功能
這篇文章主要介紹了JS實(shí)現(xiàn)聯(lián)想、自動(dòng)補(bǔ)齊國(guó)家或地區(qū)名稱(chēng)的功能，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了Js與下拉列表處理問(wèn)題,需要的朋友可以參考下2014-02-02
關(guān)于TypeScript中import JSON的正確姿勢(shì)詳解
2012年10月首度對(duì)外公布typescript（當(dāng)時(shí)已經(jīng)是0.7？的版本）同時(shí)開(kāi)源，ts的編譯器是用js編寫(xiě)的（后來(lái)改成ts？），可以在線(xiàn)編寫(xiě)。下面這篇文章主要給大家介紹了關(guān)于TypeScript中import JSON的正確姿勢(shì)，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了詳解Javascript繼承的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-03-03
Javascript數(shù)組及類(lèi)數(shù)組相關(guān)原理詳解
這篇文章主要介紹了Javascript數(shù)組及類(lèi)數(shù)組相關(guān)原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
跟我學(xué)Nodejs（三）--- Node.js模塊
這是本系列的第三篇文章了，前面2篇網(wǎng)友們反饋回來(lái)不少的消息，加上最近2天比較忙，一直沒(méi)來(lái)得及整理，周末了，趕緊給大家整理下發(fā)出來(lái)，本文講的是node.js模塊2014-05-05
javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼
這篇文章主要介紹了javascript html實(shí)現(xiàn)網(wǎng)頁(yè)版日歷代碼,需要的朋友可以參考下2016-03-03
javascript動(dòng)態(tài)添加單元格的腳本代碼
javascript動(dòng)態(tài)添加單元格的腳本代碼...2007-11-11
事件委托是指將一個(gè)事件處理程序綁定到父元素上,而不是直接綁定到每個(gè)子元素上,下面就跟隨小編一起來(lái)了解一下JavaScript是如何處理事件委托的吧2024-12-12