详解webpack引用jquery（第三方模块）的三种办法

前言

在使用webpack作为构建工具，开发 vue项目的时候，难免会用到 jquery这种第三方插件（毕竟都是从用jquery过来的），那么怎么引用呢？接下来我来说三种方法。

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中一次引用，每个组件都能拿到呢？

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",
  })
 ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • webpack中引用jquery的简单实现

    1.首先需要添加项目中jquery的依赖 npm install jquery --save-dev 2.参考配置代码: var webpack = require("webpack"); var path = require("path"); module.exports = { entry:{ home:"./src/js/home.js", -- }, output:{ path:__dirname+"/dist/js"

  • 详解webpack3如何正确引用并使用jQuery库

    经过百度.谷歌.SF.stackoverflow后终于将webpack3引用jQuery的问题解决了,网上的重复文章太多,大多也都过时了,webpack这两年发展也非常快,大多都是1.0版本的文章,与时俱进的很少,刚刚看了一眼现在已经发展到3.5.5了,真正看其中一篇文章能解决问题的几乎没有,下面是webpack3的实现代码. 首先在配置页面中加入外部引用 externals: { jquery: "jQuery" //如果要全局引用jQuery,不管你的jQuery有没有支持模块化,

  • 详解webpack引用jquery（第三方模块）的三种办法

    详解webpack引用jquery（第三方模块）的三种办法

    前言 在使用webpack作为构建工具,开发 vue项目的时候,难免会用到 jquery这种第三方插件(毕竟都是从用jquery过来的),那么怎么引用呢?接下来我来说三种方法. 1 html 模板文件引用法,这种方法最直接也是我们最熟悉,直接在项目中的网页模板文件中加入jquery的引用即可 a.引用 b.使用 2 expose-loader 引用法 a. 安装jquery npm i jquery -D b. main.js中引用 jquery import Vue from 'vue' im

  • 详解springboot解决CORS跨域的三种方式

    详解springboot解决CORS跨域的三种方式

    目录 一.实现WebMvcConfigurer接口 二.实现filter过滤器方式 三.注解@CrossOrigin 四.实战 五.cookie的跨域 一.实现WebMvcConfigurer接口 @Configuration public class WebConfig implements WebMvcConfigurer { /** * 添加跨域支持 */ @Override public void addCorsMappings(CorsRegistry registry) { // 允

  • 详解React中共享组件逻辑的三种方式

    废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示 假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return

  • 详解Golang实现请求限流的几种办法

    简单的并发控制 利用 channel 的缓冲设定,我们就可以来实现并发的限制.我们只要在执行并发的同时,往一个带有缓冲的 channel 里写入点东西(随便写啥,内容不重要).让并发的 goroutine在执行完成后把这个 channel 里的东西给读走.这样整个并发的数量就讲控制在这个 channel的缓冲区大小上. 比如我们可以用一个 bool 类型的带缓冲 channel 作为并发限制的计数器. chLimit := make(chan bool, 1) 然后在并发执行的地方,每创建一个新

  • 详解IOS判断当前网络状态的三种方法

    在项目中,为了好的用户体验,有些场景必须线判断网络状态,然后才能决定该干嘛.比如视频播放,需要线判断是Wifi还是4G,Wifi直接播放,4G先提示用户.获取网络状态的方法大概有三种: 1. Reachability 这是苹果的官方演示demo中使用到的方法,我们可以到苹果官方文档里下载Demo(点击左上角Download Sample Code 即可下载),然后把Demo里的Reachability.h和.m考到自己项目中,并在Build Phases 的 Link Binary 添加Syst

  • 详解Java实现JSONArray转Map的三种实现方式

    目录 第一种 第二种 第三种 本文只是自己常用的三种,自己总结一下,不是只有这三种,杠精走开: JSONArray数据 [ { "flagType": 1, "flagIcon": "1.jpg" }, { "flagType": 2, "flagIcon": "2.jpg" }, { "flagType": 3, "flagIcon": &quo

  • 详解Flutter和Dart取消Future的三种方法

    详解Flutter和Dart取消Future的三种方法

    目录 使用异步包(推荐) 完整示例 使用 timeout() 方法 快速示例 将Future转换为流 快速示例 结论 使用异步包(推荐) async包由 Dart 编程语言的作者开发和发布.它提供了dart:async风格的实用程序来增强异步计算.可以帮助我们取消Future的是CancelableOperation类: var myCancelableFuture = CancelableOperation.fromFuture( Future<T> inner, { FutureOr on

  • 详解Python进行数据相关性分析的三种方式

    详解Python进行数据相关性分析的三种方式

    目录 相关性实现 NumPy 相关性计算 SciPy 相关性计算 Pandas 相关性计算 线性相关实现 线性回归:SciPy 实现 等级相关 排名:SciPy 实现 等级相关性:NumPy 和 SciPy 实现 等级相关性:Pandas 实现 相关性的可视化 带有回归线的 XY 图 相关矩阵的热图 matplotlib 相关矩阵的热图 seaborn 相关性实现 统计和数据科学通常关注数据集的两个或多个变量(或特征)之间的关系.数据集中的每个数据点都是一个观察值,特征是这些观察值的属性或属性.

  • 详解Python获取线程返回值的三种方式

    目录 方法一 方法二 方法三 最后的话 提到线程,你的大脑应该有这样的印象:我们可以控制它何时开始,却无法控制它何时结束,那么如何获取线程的返回值呢?今天就分享一下自己的一些做法. 方法一 使用全局变量的列表,来保存返回值 ret_values = [] def thread_func(*args):     ...     value = ...     ret_values.append(value) 选择列表的一个原因是:列表的 append() 方法是线程安全的,CPython 中,GI

  • 详解webpack 如何集成第三方js库

    详解webpack 如何集成第三方js库

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

随机推荐