blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
更新：后来发现问题出在 ts-jest 上面，把 ts-jest 换成 jest 自带的 babel-jest 就没有这个问题了。 ------------------------------------------- 前几天下单的 M1 Air 16GB 到手了，为了测试它到底能不能胜任平常的开发工作，我立刻就对它进行了一系列测试。 前几个小时都很顺利，但是在划词翻译项目里运行 `jest` 的时候遇到了问题。 划词翻译目前有 25 个 test 文件，我用 yarn 安装好依赖之后运行了 `jest`，然后就出现问题了： - 测试在运行到 7 of...
最近打算写几个 npm 包，但是在了解过现在的模块导出方式之后，我发现选择太多了，于是在经过一番调查后，将结论整理如下。 ## 导出为 CommonJS 最受支持的模块格式当然是 CommonJS 了。只需要在 pacakge.json 里定义一个 `main` 字段即可导出 CommonJS： ```json { "main": "./dist/index.js" } ``` 但是，随着前端也开始使用 npm 作为模块发布载体，CommonJS 已经不够用了。这是因为，CommonJS 会导入一个 npm 模块中的所有代码，即使我本身可能只用到了一小部分。举个例子，如果你使用了 `const _ =...
自大学以来，我换了不少编辑器。一开始学习 C# 的时候，用的是 [Visual Studio](https://www.visualstudio.com)，这款编辑器确实非常好用，即使是用来写 JavaScript 也有很全的代码提示。 后来我决定专攻前端开发，这时候 Visual Studio 就显得太过于笨重了。在学校老师的建议下，我开始用 [Dreamweaver](http://www.adobe.com/cn/products/dreamweaver.html)，老师极力推荐它的原因是它的「所见即所得」特性——不需要自己写代码，只需要拖一些控件进去，它就会自动帮你生成页面……可是它生成的代码太差劲了，我从来没拖过控件，它的代码提示也不如 Visual Studio 全面，时不时的还会卡顿。 再后来，我在网友的推荐下开始用 [WebStorm](https://www.jetbrains.com/webstorm/)，简直爱不释手，从此再也没有换过编辑器—— 直到半个月前，我试了一下 [VS Code](https://code.visualstudio.com/)。 让我决定去尝试一下 VS Code 原因倒不是因为这个编辑器本身，而是因为它的一个插件——[Vetur](https://github.com/vuejs/vetur)，由 Vue.js 团队开发，用来给 `*.vue` 文件提供代码提示与 TypeScript 支持。用过...
在分析问题之前，先说说我是怎么在服务器上更新我的后端应用的。 我在服务器上安装了 docker，当我在本地修改了代码之后，我会将代码传送到服务器里，然后在服务器里用代码 build 出 docker image 并重新生成 container。 起初，这种方式运行的很好，但随着我 build 的次数越来越多，我能明显感觉到每次 build image 的时间变得越来越久，从一开始的 20 秒，到后来的 10 分钟，而到上一次的时候，过了半小时都没有 build 成功。 镜像 build 的过程其实就只是用 `yarn install` 安装了项目依赖，而且也确认不是网络原因，因为从 yarn install 的日志来看，模块很快就下载好了，但卡在了...
TypeScript 中有一个内置的工具类型 `Partial`，可以将类型的所有属性变成可选的： ```typescript const obj = Partial = { test: 1 } obj.test = undefined // OK ``` 但是，这个工具类型只能将对象的第一层属性变成可选的，更深层次的就没作用了： ```ts const obj = Partial = { test: { deep:...
最近在开发新版本的划词翻译。目前的划词翻译当中存在很多问题，但是，我首先要解决的就是样式冲突的问题。 ## 为什么要在浏览器扩展程序中使用 Shadow DOM 大部分扩展程序都会尝试往网页当中注入一些 DOM 结构。以划词翻译为例，为了在用户划词之后显示翻译结果，那么肯定是需要在用户的网页里加入一些 DOM 的，那么问题就来了——这些 DOM 的样式是会受到网页影响的。 比如说，用户访问的网页（后面称之为”宿主网页“）里定义了字体大小 `div { font-size: 40px }`，如果划词翻译自己的 DOM 里也用到了 div 元素，那么字体大小也会显示成 40px——很显然这是不应该的。 早在四年前，我就写了篇文章[《保护样式王国不受侵犯》](https://github.com/lmk123/blog/issues/32)，介绍了我当时为了解决这个问题时做的一些调研，方案大致有如下几个： - **使用 iframe 将划词翻译的 DOM 包裹起来**：这应该是最彻底的解决方案了，它真正隔离了扩展程序的...
2013 年 5 月 18 日，我在大学寝室开发完成了划词翻译的第一个版本。转眼间到了现在的 2021 年 5 月 16 日，两天后就是划词翻译的 “8 岁生日”了。 不得不感叹一句：时间过得真快啊…… 时间回到 2013 年，当时我正在读大三。由于我上的是专科学校，所以大三已经是“实习期”了。在大学期间，学校教的是 C#，但我反而对开发网页产生了浓厚的兴趣，奈何学校并没有专门教 JavaScript 的课程，仅有的相关课程是当时还很流行的 jQuery，我依稀记得老师当时用的教材似乎叫《锋利的 jQuery》。靠着对 jQuery 的“熟练”使用，我在 2012 年下半年找到了一些实习工作，也是在这段时间，我发现有很多想要的功能是 jQuery 里没有的，比如我想在 1...
关注划词翻译[更新日志](https://hcfy.app/docs/log/)的朋友可能会注意到，最近的划词翻译版本号成了四位数 `8.6.7.x` 这种形式，而平常都只有三位数。 只有在进行一些测试的时候，我才会将版本号用四位数的形式来表示，这意味着这个版本不会被发给所有用户。之所以会这么做，是因为最近我一直在尝试修复一个跟 [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) 相关的 bug，这个 bug 横跨了好几个版本、影响了至少上万人。 接下来，我会尝试将这个过程记录下来。 ## 划词翻译与 `` 的关系 划词翻译是一个浏览器扩展程序，当用户在网页上划选一段文本之后，划词翻译会在文本附近弹出一个小窗口并显示翻译结果。 但是，如果用户是在 `` 里划词的话，就有一点麻烦了。 最开始，我会直接在 `` 内显示窗口，但这样会有下面这些问题： - 弹窗的显示范围会被限制在 iframe 内，导致可视区域很小，经常显示不全 - 顶层窗口（即 [`window.top`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/top)）的元素会遮挡住 iframe 里的弹窗...
在[《自动化测试 JavaScript》](https://github.com/lmk123/blog/issues/106)中，我提到我想用 Puppeteer 测试划词翻译。今天花了一些时间尝试了一下。 # 搭建测试工具 首先需要安装 puppeteer 和 jest-puppeteer。在安装 puppeteer 前，记得先将 `puppeteer_download_host=https://npm.taobao.org/mirrors` 写进 `.npmrc` 文件以加快下载速度。 另外，划词翻译已经用 Jest 写了单元测试了。为了能单独运行集成测试，所以我在 jest.config.js 里用到了 [`projects`](https://jestjs.io/zh-Hans/docs/configuration#projects-arraystring--projectconfig) 选项将测试分为了两个部分： ```js module.exports = { projects: [ {...
鉴于[划词翻译](https://hcfy.app)的代码越来越庞大，我决定引入自动化测试。开发[划词翻译 v6.x 版本](https://github.com/lmk123/crx-selection-translate/tree/6.x-master/)时，我就是用 Karam 和 Jasmine 写测试的，但现如今我接触到的概念和工具还是看得我眼花缭乱： - 测试的几种类型：单元测试、集成测试、端到端测试 - 测试工具：[Karam](http://karma-runner.github.io/latest/index.html)、[Jasmine](https://jasmine.github.io/)、[Mocha](https://mochajs.org/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[Jest](https://jestjs.io/)、[jsdom](https://github.com/jsdom/jsdom)、[Istanbul](https://istanbul.js.org/) - 一些概念：测试运行器、断言库、测试覆盖率、无头（Headless）浏览器 我决定在这篇文章里厘清这些工具和概念之间的关系。 假设我们写了一个函数，用于将一个字符串转为数字： ```js const myIsNumber = (str) => Number(str) ``` 即使不用任何工具，我们也可以通过代码来测试这个函数是否是符合预期的： ```js console.log(myIsNumber('0') === 0) console.log(myIsNumber('1.1') ===...