详解webpack引用jquery(第三方模块)的三种办法

  • 时间:
  • 浏览:11

媒介

正在利用webpack做为构建东西,开辟 vue项目标时分,不免会用到 jquery这类第3圆插件(究竟结果皆是从用jquery过去的),那末怎样援用呢?接上去我来讲3种办法。

1 html 模板文件援用法,这类办法最间接也是我们最熟习,间接正在项目中的网页模板文件中参加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.$);

申明  此时我们会发明,main.js中我们援用了 jquery,$标记我们能够一般利用,但 window.$却不克不及,并且 helloWorld那个组件中也援用没有到$;为何呢?由于webpack是最初会把代码用闭包的体例挨包,$工具并出有挂载正在window下,helloWorld那个组件中并出有援用jquery以是它天然是拿没有到的,那末怎样能做到正在main.js中1次援用,每一个组件皆能拿到呢?

c. expose-loader将 jquery表露至齐局

1) 装置 expose-loader

npm i expose-loader -D

2) webpack.config.js(vue-cli 创立的项目可正在 webpack.base.conf.js)中设置装备摆设当援用 jquery 时利用 expose-loader

......
 module: {
  rules: [
   //删减以下设置装备摆设便可
   {
    test: require.resolve('jquery'),
    loader: 'expose-loader?$'
   },
.....

3 webpack插件法,给每一个模块注进$

webpack.config.js(vue-cli 创立的项目可正在 webpack.base.conf.js)
中设置装备摆设

援用 webpack

const webpack = require('webpack')

设置装备摆设插件

plugins:[
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   jquery: "jquery",
   "window.jQuery": "jquery",
   "window.$": "jquery",
  })
 ]

以上便是本文的全数内容,期望对各人的进修有所帮忙,也期望各人多多撑持剧本之家。