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 ...
随机推荐
- Linux-基础学习(五)-mariadb主从复制以及redis学习
开始今日份整理 1.mariadb的主从复制 主从复制大致图示: 1.1 mysql基本命令复习 linux下的操作 .启动mysql systemctl start mariadb .linux客户 ...
- centos查看系统信息命令
1.cd - :返回上次所在的目录 2.查看系统版本 cat /etc/redhat-release 3.查看linux内核版本1)cat /proc/version 2) uname -a3) un ...
- 【学习总结】Git学习-参考廖雪峰老师教程-总
公元2018-10-21 实验室台式机 win7 64位 参考教程: 廖雪峰Git教程 其他资料:Git-book 北大一只总结的笔记,最终整理的时候可以参考:Git笔记 评论区看到的另一个人,总结在 ...
- python之路2-字符串操作
1.我们可以用单引号(‘)或双引号(” ")创建字符串,并为字符串分配一个变量,例如: name = "张三" name = "wangsan" 字符 ...
- vue路由嵌套,vue動態路由
https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...
- [NOI2009]诗人小G(dp + 决策单调性优化)
题意 有一个长度为 \(n\) 的序列 \(A\) 和常数 \(L, P\) ,你需要将它分成若干段,每 \(P\) 一段的代价为 \(| \sum ( A_i ) − L|^P\) ,求最小代价的划 ...
- Android greenDAO 数据库 简单学习之基本使用
看网上对greenDAO介绍的不错,今天就动手来试一把,看看好不好使. greenDAO 官方网站:http://greendao-orm.com/ 代码托管地址:https://github.com ...
- [powershell] 批量重命名,修改文件名中的部分字符串
实例:替换一个目录下所有的字幕文件从720p到1080p ls $Path -Recurse |ForEach-Object{Rename-Item $_.FullName $_.FullName.R ...
- postgresql语句
查询oracle数据库所有表数据量 select t.table_name,t.num_rows from user_tables t ORDER BY t.num_rows desc 查询postg ...
- POJ - 3616 Milking Time (动态规划)
Bessie is such a hard-working cow. In fact, she is so focused on maximizing her productivity that sh ...