安利自己写的easy-clipboard库

Posted 2021-03-08 yangzhou33

概述

clipboard.js 是一个非常好用的剪切板插件，但是随着前端框架的演变，用户与网页交互的方式越来越多，不仅限于点击事件了，并且在很多情况下，我们可能不需要它强制性自带的点击事件，所以我打算把 clipboard.js 精简一下，把点击事件删掉，这就是我开发 easy-clipboard 这个库的初衷。

值得说明的是，这是我第一个完整结合 ts + rollup + demo + jest 写的一个库！

项目地址

遇到的困难

1.semantic error TS2531: Object is possibly ‘null‘.

在打包的时候，ts报了上面的错误，报错代码是：

window.getSelection().removeAllRanges()

我查了很久解决方法，在百度、google 里面查过，在 typescript 文档里面查过，在 stackoverflow 里面查过，都没有成功（网上有很多解决方案是很老的，现在的 ts 已经不用那种写法了），后来在一个偶然的机会下，我看到了感叹号的写法，然后通过冷静分析报错内容，并在 node_modules 的 @types 里面查找 window 的定义，通过理智分析，才发现应该是由于 window.getSelection() 的值可能是 null 造成的。最后在它的后面加了一个感叹号解决了（这是 ts 的新语法）。

2.document.createRange() is undefined

在用 jest 进行测试的时候，我遇到了上面的报错。通过定位，我发现是在一个依赖包 select 包里面发生了上面的报错。我本来以为通过 jest 设置屏蔽 node_modules 里面的依赖就可以解决，但是通过查阅文档，我发现 vue-cli 的默认 jest 设置已经帮我屏蔽了 node_modules 里面的包。最后我通过打印 document.createRange 的内容才发现，这个报错的原因是因为 jest 所依赖的 JSDOM 里面的 document 没有 createRange 这个方法，所以最后我 mock 了这个方法解决了。这里我才知道，在使用 jest 的时候，并不是完全像在浏览器里面一样，有些方法还是要自己 mock 。

3.Please provide the repository token to upload reports via -t :repository-token

在使用 codecov 上传覆盖率结果的时候，我遇到了上面的报错。通过查阅官网，我明白了通过 circleci 工具是可以不需要这个 token 的，但是 circleci 只能免费使用一个 repo，而我在另一个 repo 里面使用了 circleci，所以我并不打算在这里使用 circleci。只能继续查阅资料了，最后我通过查阅 codecov 这个包的文档时发现，它支持下面这种写法，问题解决。

export CODECOV_TOKEN=":uuid-repo-token"
# or
./node_modules/.bin/codecov --token=:token