纯TS引入fastclick

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

环境：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 } }

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

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