查看: 274|回复: 0

[HTML代码] 使用parcel替代webpack制作omi-tap插件 2017-12-29 10:05 by 【当耐特】, ... 阅读, ... 评论, 收藏,

发表于 2018-1-2 08:00:00

Parcel 是一个零配置的网络应用打包工具, 适用于经验不同的开发者, 它利用多核处理提供了极快的速度。对比 webpack 最大的两个亮点:

  • 零配置
  • 极快速

omi 相关的插件都是基于 webpack 进行开发,今天正式投入 Parcel 怀抱。

准备工作

通过 yarn 或 npm 安装 parcel:

  1. yarn global add parcel-bundler
复制代码

or:

  1. npm install -g parcel-bundler
复制代码

创建一个 package.json 文件:

  1. yarn init -y
复制代码

or

  1. npm init -y
复制代码

创建完的内容大概是这样:

  1. {
  2. "name": "omi-tap",
  3. "version": "0.1.0",
  4. "description": "Support tap event in your Omi project.",
  5. "main": "index.js",
  6. "scripts": {
  7. "start": "parcel example/index.html --open",
  8. "test": "echo \"Error: no test specified\" && exit 1"
  9. },
  10. "keywords": ["tap","omix","omi","omi-tap"],
  11. "author": "dntzhang",
  12. "license": "MIT",
  13. "dependencies": {},
  14. "devDependencies": {
  15. "omix": "^1.2.4",
  16. "babel-preset-env": "^1.6.1",
  17. "babel-preset-omi": "^0.1.0",
  18. "parcel-bundler": "^1.2.0"
  19. }
  20. }
复制代码

devDependencies是开发时候的依赖包,parcel-bundler全局安装完后,可以使用下面命令来打包:

  1. parcel example/index.html --open
复制代码

带上--open会自动打开浏览器。parcel打包可以使用js或者html为入口文件。

添加 .babelrc ,如下:

  1. {
  2. "presets": [
  3. "env", "omi"
  4. ]
  5. }
复制代码
实现 omi-tap
  1. Omi.extendPlugin('omi-tap', function (dom, instance) {
  2. var x1,
  3. y1,
  4. scrollTop
  5. dom.removeEventListener('touchstart', dom._preTouchStart, false)
  6. dom.removeEventListener('touchend', dom._preTouchEnd, false)
  7. dom.addEventListener('touchstart', start, false)
  8. dom.addEventListener('touchend', end, false)
  9. dom._preTouchStart = start
  10. dom._preTouchEnd = end
  11. function start(evt) {
  12. x1 = evt.touches[0].pageX
  13. y1 = evt.touches[0].pageY
  14. scrollTop = document.body.scrollTop
  15. }
  16. function end(evt) {
  17. if (Math.abs(evt.changedTouches[0].pageX - x1) < 30 && Math.abs(evt.changedTouches[0].pageY - y1) < 30 && Math.abs(document.body.scrollTop - scrollTop) < 30) {
  18. getHandler('tap', dom, instance)(evt)
  19. }
  20. }
  21. })
  22. function getHandler(name, dom, instance) {
  23. var value = dom.getAttribute(name)
  24. if (value === null) {
  25. if (dom[name]) {
  26. return function (evt) {
  27. dom[name].bind(instance)(evt, dom)
  28. }
  29. }
  30. return noop
  31. } else {
  32. return function (evt) {
  33. instance[value].bind(instance)(evt, dom)
  34. }
  35. }
  36. }
复制代码

omi 的插件体系通过 Omi.extendPlugin(pluginName, fn) 方法实现,相当于后置处理器,插件方法会在组件 mounted/installed 之后执行。上面的 tap 的原理:

  • 判断触摸前后的距离是否小于30
  • 判断触摸前后的滚动条位置是否小于30

同时满足上面两个条件触发 tap 事件。

插件使用
  1. npm install omix
  2. npm install omi-tap
复制代码

然后:

  1. import { Component } from 'omix';
  2. import 'omi-tap';
  3. class App extends Component {
  4. tapHandler(evt) {
  5. alert('Hello Omi + Parcel!')
  6. }
  7. render() {
  8. return (
  9. <div>
  10. <h1 omi-tap tap={this.tapHandler}>Hello Omi + Parcel ?? ??</h1>
  11. </div>
  12. )
  13. }
  14. }
  15. Omi.render(new App(),"#container");
复制代码
开发调试
  1. npm start
复制代码

or

  1. parcel example/index.html --open
复制代码
项目源码

https://github.com/AlloyTeam/omix/tree/master/plugins/omi-tap



回复

使用道具 举报