纯TS引入fastclick

背景：移动端解决300s延迟问题

环境：TS 4.5.5 + webpack 5.69.1

方案： 1. 使用ts版fastclick， @types/fastclick

2. 使用原生fastclick.js

实现：

方案一：

1. yarn add '@types/fastclick'

2. 修改@types -> fastclick -> index.d.ts文件的代码

declare module "fastclick" {// function fastclick(layer: any, options?: FastClickOptions): FastClickObject;// namespace fastclick {//  var FastClick: FastClickStatic;// }var FastClick: FastClickStatic;//改成这行代码export = FastClick; // 改成这样
}

3. 引入

import fastclick from 'fastclick'

不过很遗憾，这种方式在我的项目中不起效，报错cannot resolve "fastclick"，尝试了多次后放弃

方案二：

1. yarn add -D fastclick

2. 复制node_modules里的fastclick -> fastclick.js的代码，我这里只复制了自执行函数里面的代码。即(function(){ /**代码*/ })()，自执行函数不需要

3. 在项目的lib文件夹新建fastclick.js文件，将刚复制的代码粘贴到这里，还要注释部分代码

 // if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {//  // AMD. Register as an anonymous module.//  define(function() {//       return FastClick;//     });// } else if (typeof module !== 'undefined' && module.exports) {//   module.exports = FastClick.attach;//   module.exports.FastClick = FastClick;// } else {//     window.FastClick = FastClick;// }

4. 在fastclick.js文件里面导出： export default FastClick

5. 使用const fastClick = require("./fstclick")

6. 打印一下，看看引入成功否：console.log(fastClick)

这时很明显是引入成功了，但是呢这里多了个default属性是咋回事？

不过倒是可以使用了：

window.addEventListener('load',function () {console.log(fastclick)fastclick.default.attach(document.body)},false
)

7. 导出时使用： module.exports = FastClick;

8. 这时就正常了，打印时没有再出现default这个属性，可以正常使用：fastClick.attach(document.body)

另外关于webpack的配置

{ loader: 'ts-loader', options: { allowTsInNodeModules: true } }

不配置这个也是不行的诶！！！！！！

！！！转载要注明啊！！！

纯TS引入fastclick相关推荐

Vue引入fastclick
引入fastclick解决移动的点击300毫秒延迟问题注意是移动端 npm install fastclick --save // 终端下载fastclick 在main.js中引入 import ...
ts引入公共方法_angular 封装公共方法
angular封装公共方法到service中间件,节省开发时间 layer.service.ts openAlert(callback) {// 传递回调函数 const dialogRef = th ...
Vue项目中TS引入多个.svg文件的总结
背景: Vue-CLI创建的项目,想要用自定义的icon,icon是在阿里icon-font下载的svg文件,直接使用import xxx from '@/assets/icons/xxx.svg'T ...
vue使用ts 引入组件_vue中使用TS实现父子组件直接的通信
vue中使用ts 在vue中使用ts是需要有一定的ts基础的,如果对于ts小白的话还是推荐先看一下ts官网,先了解基础以后这样使用起来才会事半功倍. 1.下载依赖项 npm install --sav ...
vue使用ts 引入组件_vue项目中使用ts（typescript）入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
ts引入js时的类型检查
项目由js向ts转型时,若使用import的方式引入js文件,则在脚本检查ts时,会报错找不到这些js文件,造成ts检查日志里有很多同样的信息,因此很难找到真正的ts报错信息. 有如下三种解决方案: ...
vue3 vite ts引入vue文件报错 ts(2307)
vue3 vite ts 生成的项目模板,在ts文件中引入vue文件报错 ts(2307),只是ts报错,并不影响项目运行. 官方文档有说明:http://vue.dragonlm.com/guide ...
vue3+ts 引入ztree插件
vue3+ts+ztree 新公司要用新技术 vue3+ts 一切从头学最近要引一个树的插件 ztree 所以把遇到的问题都记下来一.ztree 找了无数个tree的插件,最后被ztree征服 ...
VUE3+TS 引入JQuery
先执行如下安装命令,安装jquery npm install jquery npm install @types/jquery 然后在main.ts中引入 import $ from 'jquery' ...

纯TS引入fastclick

纯TS引入fastclick相关推荐

最新文章

热门文章