• 安利自己写的easy-clipboard库


    概述

    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
    
  • 相关阅读:
    修饰符
    Flex—鼠标样式设置
    代码审查――为可读性努力的巨大能量
    防火门、防盗门、安全门、实木门、单元门、智能门、装甲门、复合门
    表单设计器—开篇和环境
    DB2 9.5在英文版win7上Control Center菜单栏乱码问题解决
    Resin2.1与 IIS 整合
    Flex/AIR控件字体样式设置
    表单设计器—HTML元素操作
    学习ORACLE网址
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/12354874.html
Copyright © 2020-2023  润新知