webpack学习笔记——项目引入zepto及tap事件失效的解决

最新推荐文章于 2020-04-27 11:30:49 发布

转载最新推荐文章于 2020-04-27 11:30:49 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yueliangcl/p/6761819.html

文章标签：

#webpack #javascript #ViewUI

本文介绍如何使用npm安装Zepto.js并配置Webpack，解决$isnotdefined问题。同时提供两种方法实现tap事件，一种是手动将touch.js加入Zepto.js，另一种是在入口文件中引入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先要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的下面，即可。

转载于:https://www.cnblogs.com/yueliangcl/p/6761819.html