使用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 使用这 ...
随机推荐
- LSA和pLSA的比较
Comparison LSA pLSA 1. Theoretical background Linear Algebra Probabilities and Statistics 2. Objec ...
- Python 学习之路2
这是我在大学上机实验的作业 实验一 将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. 首先,先谈下我的设计思路: 设计思路: 1. 先需判断输入的number是不是一个数字( ...
- 关于HTML5新手应该知道的几点知识
随着移动互联网的快速发展,HTML5迅速崛起,我们的生活的方方面面都被HTML5渗透着.HTML5在PC端.移动端上均应用广泛,被称为Web的未来.而随着Google正式停止支持Swiffy,HTML ...
- 作为新手 HTML5如何自学为好?
互联网发展到今天,越来越多的技术岗位人才出现了稀缺的状态,就拿当前的HTML5来讲,基本成为了每家互联网公司不可缺少的人才.如果抓住这个机会,把HTML5搞好,那么前途不可限量,而且这门行业是越老越吃 ...
- 【笔记】web 的回流与重绘及优化
最近看了幕课网 web 前端性能优化的课程,其中说到了浏览器的回流(reflow) 及 重绘(repaint).觉得以后面试或许会被问到所以做一下笔记: 课程从回流及重绘这两个点延伸出了一个知识点就是 ...
- MatlabR2015b用了一段时间之后需要重新激活
问题描述:MatlabR2015b安装成功,用了一段时间之后需要重新激活,按照http://www.cr173.com/soft/490645.html教程,无法激活成功,卸载重新安装也不行. 解决方 ...
- .net 系列:Expression表达式树、lambda、匿名委托 的使用
首先定义一个泛型委托类型,如下: public delegate T Function<T>(T a, T b); 实现泛型委托的主体代码,并调用: public static strin ...
- Django的分页器(paginator)
先导入模块: from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 分页器paginator 下面的所有方法 ...
- Python函数篇(2)-递归函数、匿名函数及高阶函数
1.全局变量和局部变量 一般定义在程序的最开始的变量称为函数变量,在子程序中定义的变量称为局部变量,可以简单的理解为,无缩进的为全局变量,有缩进的是局部变量,全局变量的作用域是整个程序,而局部变量的作 ...
- 第三节:Creating API Endpoints (创建API路由)
对于这篇文章的标题,其实,直译就是创建api端点.但是,真的很难懂,我还是写为API路由吧.每篇,文章,我都会全部去进行实践操作,力求写一个好点的教程. 本文英文地址-->https://git ...