使用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 使用这 ...
随机推荐
- RocketMQ快速入门
前面几篇文章介绍了为什么选择RocketMQ,以及与kafka的一些对比: 阿里 RocketMQ 优势对比,方便大家对于RocketMQ有一个简单的整体了解,之后介绍了:MQ 应用场景,让我们知道M ...
- 照虎画猫写自己的Spring——依赖注入
前言 上篇<照虎画猫写自己的Spring>从无到有讲述并实现了下面几点 声明配置文件,用于声明需要加载使用的类 加载配置文件,读取配置文件 解析配置文件,需要将配置文件中声明的标签转换为F ...
- 一个可扩展的深度学习框架的Python实现(仿keras接口)
一个可扩展的深度学习框架的Python实现(仿keras接口) 动机 keras是一种非常优秀的深度学习框架,其具有较好的易用性,可扩展性.keras的接口设计非常优雅,使用起来非常方便.在这里,我将 ...
- 内存泄漏监测-LeakCanary
内存泄漏监测方法之使用LeakCanary LeakCanary出处: github:https://github.com/square/leakcanary/issues square 公司 这个公 ...
- JavaEE中的MVC(三)定制Struts——命令模式
注:本文并不讲解Struts框架,只研究这种思想的使用 JavaEE中的MVC(五)定制Struts--Action跳转Jsp 在讲这个之前,先给你们看一下我服务器1.0版本的截图,是不是很可笑,看起 ...
- SQL知识目录
SQL理论知识 -------理论知识总结 -------理论知识总结 -------理论知识总结 -------理论知识总结 -------理论知识总结 -------理论知识总结 -------理 ...
- VMware下设置Centos7联网与固定IP连接Xshell
爱折腾的小伙伴应该经常会用Vmware安装一些虚拟机用于学习,但是比如装了Linux,经常操作的时候非常切换窗口的时候非常麻烦,所以很多人都会选择用Xshell来连接本地的Linux虚拟机,但是用Xs ...
- JSP4(内置对象)
一.超级链接传值问题传值: <a href="href1.jsp?id=1&name=pkd&age=40">This is my JSP page. ...
- 对java多线程里Synchronized的思考
Synchronized这个关键字在多线程里经常会出现,哪怕做到架构师级别了,在考虑并发分流时,也经常会用到它.在本文里,将通过一些代码实验来验证它究竟是"锁"什么. 在启动多个线 ...
- 安装vue-cli时出现的错误,cmd 卡住
今天在构建vue 时遇到个问题, cmd 执行 vue init webpack my-project 时 , 出现如下乱码, 然后 页面 卡住在 项目说明 ,操作不了, 最后发现是 nodejs 版 ...