webpack学习笔记——项目引入zepto及tap事件失效的解决
先要npm下来zepto:npm install zepto
然后npm下来exports-loader和script-loader
配置如下:
JavaScript
// webpack.config
{
// ...
module: {
loaders: [{
test: require.resolve('zepto'),
loader: 'exports-loader?window.Zepto!script-loader'
}]
}
}
这样我们在页面入口文件中就可以这么写:
JavaScript
// entry.js
import $ from 'zepto'
$(function () {
// ...
})
引入成功后,会解决"$ is not defined"的问题
------------------------------------分割线-----------------------------------------
但是tap事件是触发不了的,因为zepto没有继承touch.js,在node_moudules文件夹中看npm下来的zepto,在src文件夹下游touch.js文件,正是我们需要的,现在就想办法把这个js引入就可以了。
想法有两个:
1,重新打包zepto.js,将touch.js打包到zepto.js中,这是我的思路,但是我并不知道怎么来实现,于是想了个办法,吧touch.js文件中的代码拷贝到/dist/zepto.js的代码的最后,即可。
2,将touch.js引入到entry.js,require('../node_modules/zepto/src/touch.js'),这句代码要写在引入zepto的下面,即可。
webpack学习笔记——项目引入zepto及tap事件失效的解决的更多相关文章
- zepto之tap事件点透问题分析及解决方案
点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就 ...
- zepto的tap事件的穿透分析
首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取 ...
- muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制
目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...
- Python3+Selenium3+webdriver学习笔记14(等待判断 鼠标事件 )
!/usr/bin/env python -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记14(等待判断 鼠标事件 )'''from selenium im ...
- 【原】webpack学习笔记
之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- 更博不能忘——webpack学习笔记
webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不 ...
- webpack学习笔记
1.安装webpack npm install webpack -g 2.进入项目目录,初始化 npm init 3.将webpack安装到项目依赖中 npm install webpack --sa ...
- Webpack学习笔记(一)
转载http://zhaoda.net/webpack-handbook/module-system.html 转载http://www.cnblogs.com/vajoy/p/4650467.htm ...
随机推荐
- mn
http://image.uczzd.cn/10129986679866437816.jpg?id=0&from=export https://www.cnblogs.com/ityoukno ...
- day17--模块之time、calendar、datetime、sys、os、os.path、json、pickle、random
一.时间模块(time,calendar,datetime) 在Python中,通常有这几种方式来表示时间: 时间戳(timestamp):通常来说,时间戳表示的是从1970年1月1日00:00:00 ...
- mysql 提高一 动态sql 传变量
1.需求 DELIMITER $$ SECOND STARTS '2018-09-07 08:00:00' ON COMPLETION PRESERVE ENABLE DO BEGIN ) DEFAU ...
- 基于 HTML5 的工业互联网云平台监控机房 U 位
前言 机柜 U 位管理是一项突破性创新技术--继承了 RFID 标签(电子标签)的优点的同时,完全解决了 RFID 技术(非接触式的自动识别技术)在机房 U 位资产监控场应用景中的四大缺陷,采用工业互 ...
- Logstash filter 插件之 grok
本文简单介绍一下 Logstash 的过滤插件 grok. Grok 的主要功能 Grok 是 Logstash 最重要的插件.它可以解析任意文本并把它结构化.因此 Grok 是将非结构化的日志数据解 ...
- Python Revisited Day 13 (正则表达式)
目录 13.1 Python的正则表达式语言 13.1.1 字符与字符类 13.1.2 量词 {m, n} ? + * 组与捕获 ?:可以关闭捕获 断言与标记 13.2 正则表达式模块 正则表达式模块 ...
- iview 动态渲染menu时active-name无效的问题
动态渲染menu时,如果需要active-name,那么name只能绑定index,动态渲染的数组初始必须有一个空对象.否则无法使用active-name属性.注:仅限3.0版本,不排除新版本修复的可 ...
- PHP中的DateTime类
DataTime类跟date(),strtotime(),gmdate()等函数有相同的作用,都是用来处理日期和时间的,但DateTime类更加直观.方便, 所以在PHP5.2.0以后推荐使用Date ...
- uni-app 引入ecart
https://blog.csdn.net/CherryLee_1210/article/details/83016706(copy) 1.首先在uni-app中不支持包下载所以得自己先新建一个项目, ...
- Python进阶1---高阶函数、柯里化
高阶函数 不相等 自定义sort函数 内建函数--高阶函数 #sort函数 def sort2(lst,key = None,reverse = False): res = [] if key is ...