詳解webpack引用jquery（第三方模塊）的三種辦法_第1頁
詳解webpack引用jquery（第三方模塊）的三種辦法_第2頁
詳解webpack引用jquery（第三方模塊）的三種辦法_第3頁
詳解webpack引用jquery（第三方模塊）的三種辦法_第4頁
全文預覽已結束

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第詳解webpack引用jquery（第三方模塊）的三種辦法在使用webpack作為構建工具，開發(fā)vue項目的時候，難免會用到jquery這種第三方插件（畢竟都是從用jquery過來的），那么怎么引用呢？接下來我來說三種方法。

1html模板文件引用法，這種方法最直接也是我們最熟悉，直接在項目中的網頁模板文件中加入jquery的引用即可

a.引用

b.使用

2expose-loader引用法

a.安裝jquery

npmijquery-D

b.main.js中引用jquery

importVuefrom'vue'

importAppfrom'./App'

importrouterfrom'./router'

import$from'jquery'//加入此行

VductionTip=false

console.warn("==============main.js輸出$對象======================");

console.log($);

console.log(window.$);

說明此時我們會發(fā)現，main.js中我們引用了jquery，$符號我們可以正常使用，但window.$卻不能，而且helloWorld這個組件中也引用不到$；為什么呢？因為webpack是最后會把代碼用閉包的方式打包，$對象并沒有掛載在window下，helloWorld這個組件中并沒有引用jquery所以它自然是拿不到的，那么怎么能做到在main.js中一次引用，每個組件都能拿到呢？

c.expose-loader將jquery暴露至全局

1)安裝expose-loader

npmiexpose-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$'

.....

3webpack插件法，給每個模塊注入$

webpack.config.js（vue-cli創(chuàng)建的項目可在webpack.base.conf.js）

中配置

引用webpack

constwebpack=require('webpack')

配置插件

plugins:[

newwebpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

jquery:"jquery",

"window.jQuery":"jquer

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論