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 ...
随机推荐
- web框架开发-Django模型层(1)之ORM简介和单表操作
ORM简介 不需要使用pymysql的硬编码方式,在py文件中写sql语句,提供更简便,更上层的接口,数据迁移方便(有转换的引擎,方便迁移到不同的数据库平台)…(很多优点),缺点,因为多了转换环节,效 ...
- Editplus5.0 注册码
EditPlus5.0注册码 注册名 Vovan 注册码 3AG46-JJ48E-CEACC-8E6EW-ECUAW EditPlus3.x注册码 注册名 linzhihui 注册码 5A2B6-69 ...
- 外部访问docker中的MySQL
注:192.168.1.203机器上装有docker,容器在该机器上 mysql> use mysql; mysql> update user set authentication_str ...
- asp.net webapi中helppage
今天研究了下webapi,发现还有自动生成接口说明文档提供测试的功能 参考:https://docs.microsoft.com/en-us/aspnet/web-api/overview/getti ...
- docker 小技巧 docker network create br-name 指定IP地址
在某些情况下,使用 docker network create br-name 命令创建网络的时候,会创建一个新的网桥,该网桥的默认IP地址为172.18.0.0\16(或相临的IP地址段) 这个ip ...
- Python Revisited (变量)
目录 = 浅拷贝 深拷贝` 函数的默认参数为可变类型时 危险 全局变量与临时变量 global 在函数里面进行复制 再看一个例子 numpy里的bug? 待续 @ 首先,需要指出的是,Python的变 ...
- 控制结构(10): 指令序列(opcode)
// 上一篇:管道(pipeline) // 下一篇:Continuation-passing_style(CPS) 发现问题 在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编 ...
- docker(五) 使用Docker Registry搭建镜像私服
1.创建私服 docker run -d --name registry -v /opt/data/registry:/var/lib/registry -p 5000:5000 registry - ...
- mysql监控每一条执行的sql语句
查看日志配置是否打开 SHOW VARIABLES LIKE "general_log%"; SET GLOBAL general_log = 'ON'; 打开日志 SET G ...
- Oracle普通视图和物化视图的区别
介绍 物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普通视图是虚拟表,应用的局限性大,任何对视图的查询, Oracle 都实际上转换为视图SQL语句的查询. ...