使用parcel替代webpack制作omi-tap插件
Parcel 是一个零配置的网络应用打包工具, 适用于经验不同的开发者, 它利用多核处理提供了极快的速度。对比 webpack 最大的两个亮点:
- 零配置
- 极快速
omi 相关的插件都是基于 webpack 进行开发,今天正式投入 Parcel 怀抱。
准备工作
通过 yarn 或 npm 安装 parcel:
yarn global add parcel-bundler
or:
npm install -g parcel-bundler
创建一个 package.json 文件:
yarn init -y
or
npm init -y
创建完的内容大概是这样:
{
"name": "omi-tap",
"version": "0.1.0",
"description": "Support tap event in your Omi project.",
"main": "index.js",
"scripts": {
"start": "parcel example/index.html --open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": ["tap","omix","omi","omi-tap"],
"author": "dntzhang",
"license": "MIT",
"dependencies": {},
"devDependencies": {
"omix": "^1.2.4",
"babel-preset-env": "^1.6.1",
"babel-preset-omi": "^0.1.0",
"parcel-bundler": "^1.2.0"
}
}
devDependencies是开发时候的依赖包,parcel-bundler全局安装完后,可以使用下面命令来打包:
parcel example/index.html --open
带上--open会自动打开浏览器。parcel打包可以使用js或者html为入口文件。
添加 .babelrc ,如下:
{
"presets": [
"env", "omi"
]
}
实现 omi-tap
Omi.extendPlugin('omi-tap', function (dom, instance) {
var x1,
y1,
scrollTop
dom.removeEventListener('touchstart', dom._preTouchStart, false)
dom.removeEventListener('touchend', dom._preTouchEnd, false)
dom.addEventListener('touchstart', start, false)
dom.addEventListener('touchend', end, false)
dom._preTouchStart = start
dom._preTouchEnd = end
function start(evt) {
x1 = evt.touches[0].pageX
y1 = evt.touches[0].pageY
scrollTop = document.body.scrollTop
}
function end(evt) {
if (Math.abs(evt.changedTouches[0].pageX - x1) < 30 && Math.abs(evt.changedTouches[0].pageY - y1) < 30 && Math.abs(document.body.scrollTop - scrollTop) < 30) {
getHandler('tap', dom, instance)(evt)
}
}
})
function getHandler(name, dom, instance) {
var value = dom.getAttribute(name)
if (value === null) {
if (dom[name]) {
return function (evt) {
dom[name].bind(instance)(evt, dom)
}
}
return noop
} else {
return function (evt) {
instance[value].bind(instance)(evt, dom)
}
}
}
omi 的插件体系通过 Omi.extendPlugin(pluginName, fn)
方法实现,相当于后置处理器,插件方法会在组件 mounted/installed 之后执行。上面的 tap 的原理:
- 判断触摸前后的距离是否小于30
- 判断触摸前后的滚动条位置是否小于30
同时满足上面两个条件触发 tap 事件。
插件使用
npm install omix
npm install omi-tap
然后:
import { Component } from 'omix';
import 'omi-tap';
class App extends Component {
tapHandler(evt) {
alert('Hello Omi + Parcel!')
}
render() {
return (
<div>
<h1 omi-tap tap={this.tapHandler}>Hello Omi + Parcel
使用parcel替代webpack制作omi-tap插件的更多相关文章
- webpack编写一个plugin插件
插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...
- Parcel Vs Webpack
横空出世的Parcel近日成为了前端圈的又一大热点,在短短几周内就获得了13K的Star.作为前端构建工具新人的Parcel为什么能在短期内获得这么多赞同?他和老大哥Webpack比起来到底有什么优势 ...
- [译]Godot系列教程五 - 制作Godot编辑器插件
制作插件 下文仅针对2.1版本. 关于插件 插件是为编辑器扩展出更多有用工具的重要方式.它可以完全用GDScript和标准场景开发,甚至都不需重新加载编辑器就可生效.不像模块,你无需创建C++代码.也 ...
- 深入浅出的webpack构建工具---AutoDllPlugin插件(八)
深入浅出的webpack构建工具---AutoDllPlugin插件(八) DllPlugin插件能够快速打包,能把第三方依赖的文件能提前进行预编译打包到一个文件里面去.提高了构建速度.因为很多第三方 ...
- webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...
- C#制作ActiveX浏览器插件.net
开发环境:VS2008 第一步 创建项目 新建一个项目,选择“Windows窗体控件库”,创建一个用户控件项目“ActiveXDemo”(注意,这里起名不能用中文,否则后面会出问题),里面有个用户控件 ...
- webpack之 plugin(插件)
plugin plugin是插件的意思,通常用来对某个现有的架构就行拓展 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等 loader和plugin区别 lo ...
- webpack 教程 那些事儿03-webpack两大精华插件,热加载
本节主要讲述 webpack的两大经典开发调试插件,热插拔内存缓存机制 文章目录 1. html-webpack-plugin插件的使用 2. webpack-dev-middleware 插件登场 ...
- WordPress插件制作教程(六): 插件函数之动作(Actions)函数
这一篇为大家说一下WordPress插件函数吧,要制作插件,了解这些函数是非常有必要的 WordPress插件函数分为“动作”(Actions)和过滤器”(Filters),WordPress 使用这 ...
随机推荐
- Javaweb学习(一):tomcat服务器配置与启动
目前所使用的集成开发环境为myeclipse10.7,tomcat版本为apache-tomcat-7.0.82,部分编写地方可能有所不同,但是工具不是最主要的,重要的是掌握的知识. tomcat在m ...
- SQLServer2008数据库连接error40错误
在连接SQL Server偶尔会遇到报错,如在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为 ...
- 编程语言的基础——搞定JavaIO
关键字:IO基础,JUnit生命周期,字节流,字符流,字符编码,对象流,序列化,反序列化 Java I/O 流是一组有顺序的,有起点和终点的字节集合.是对设备文件间数据传输的总称和抽象. 在IO中涉及 ...
- ShoneSharp语言(S#)的设计和使用介绍系列(4)— 入门概述
ShoneSharp语言(S#)的设计和使用介绍 系列(4)- 入门概述 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/ShoneSharp. ...
- accept 文件描述符用尽处理
if (events[i].data.fd == listenfd) { peerlen = sizeof(peeraddr); connfd = ::accept4(listenfd, (struc ...
- 用Redis轻松实现秒杀系统
秒杀系统的架构设计 秒杀系统,是典型的短时大量突发访问类问题.对这类问题,有三种优化性能的思路: 写入内存而不是写入硬盘 异步处理而不是同步处理 分布式处理 用上这三招,不论秒杀时负载多大,都能轻松应 ...
- 利用nginx实现负载均衡和动静分离
1.Nginx介绍 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器 . Nginx 是由 ...
- node.js爬虫
这是一个简单的node.js爬虫项目,麻雀虽小五脏俱全. 本项目主要包含一下技术: 发送http抓取页面(http).分析页面(cheerio).中文乱码处理(bufferhelper).异步并发流程 ...
- POST和GET有什么区别?
1. GET主要用于从服务器查询数据,POST用于向服务器提交数据 2. GET通过URL传递数据,POST通过http请求体传递数据 3. GET传输数据量有限制,不能大于2kb,POST传递的数据 ...
- iOS中常见的锁
多线程的安全隐患 一块资源可能会被多个线程共享,也就是说多个线程可能会访问同一块资源. 比如多个线程同时操作同一个对象,同一个变量. 当多个线程访问同一块资源时,很容易引发数据错乱和数据安全问题. 比 ...