blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
[我错了，electron-builder 更简单好用](https://github.com/lmk123/blog/issues/129) :joy: 以下是原文： ------------------------------- 先贴环境： ``` macOS：14.2.1 Apple M1 Electron：v28.0.0 ``` 最近开发了一个小 Electron 应用，算是用来练习。由于业务逻辑不复杂，所以开发阶段很顺利，没有遇到什么问题，但是在打包阶段就踩到很多坑了，记录一下。 以前主流的打包工具是 electron-builder，但后来 Electron 官方重写了 electron-forge，所以我还是决定使用官方支持的。 ## 第一个坑：Electron Forge 不支持 monorepo 项目结构（又或者 NPM / Yarn workspaces）...
昨天[尝试了下 Electron Forge](#128)，今天尝试下 Electron Builder。 第一次尝试选择 Forge 有两个原因： - 它受到 Electron 官方支持 - 它文档更简单直观 然后这次尝试了下 Electron Builder，我发现我被它文档里复杂的 Configuration 给骗了，虽然它文档看起来复杂，但是使用起来是真的简单…… 给现有的 Electron 项目集成 electron builder 只需要一句命令：`npx electron-builder` > 唯一需要注意的点：如果你使用了 webpack 之类的工具，那么输出文件夹不要用...
**2023 年 11 月 17 日更新**：Chrome 发了新公告，准备从 2024 年 6 月开始下架并禁用 Manfiest V2 了 :joy: **2022 年 12 月 13 日更新**：哈哈哈，Chrome 果然推迟了 Manifest V2 的下线时间： 图中链接： 以下是原文。 ----------------------------------- 最近着手准备将划词翻译迁移到 Manifest...
> 此文章使用 jest v29.3.1 版本。jest v29.7.0 测试结果一样。 在写测试的时候，我们一般都需要在运行每个测试之前清除 mock 函数的状态，避免测试代码之间 mock 函数的状态互相影响。jest 提供了两个函数来清除 mock 函数的状态： - [mockFn.mockReset()](https://jestjs.io/docs/mock-function-api#mockfnmockreset) - [mockFn.mockRestore()](https://jestjs.io/docs/mock-function-api#mockfnmockrestore) 如果 mock 函数比较多的话，挨个调用这俩方法比较繁琐，所以 jest 还提供了两个方法： - [jest.resetAllMocks()](https://jestjs.io/docs/jest-object#jestresetallmocks)：文档上说相当于给所有 mock 函数调用了 `mockReset()` 方法。...
我有一个项目的 Webpack 配置，里面有且仅有一个 [CopyWebpackPlugin](https://webpack.js.org/plugins/copy-webpack-plugin/)，我用它复制了一些 js / css 文件到 dist 文件夹，同时，我使用了 CopyWebpackPlugin 的 `transform` 选项来压缩这些文件。 我的配置大概是这样： ```js // webpack.config.js const CopyPlugin = require('copy-webpack-plugin') const Terser = require('terser') const CleanCSS = require('clean-css')...
## 背景 在开发 Chrome 扩展程序的时候，大部分 chrome.* 接口都是类似于下面这样的 callback 风格： ```js chrome.tabs.create({ url: 'https://hcfy.app' }, tab => { console.log(tab.id) }) ``` 新出的 Manifest V3 同时支持 callback 风格与 Promise 风格： ```js //...
更新：TypeScript 5.0 给 moduleResolution 添加了一个新的选项 `bundler`，可以解决文中提到的需要给输出的文件加上后缀之类的问题。 我个人还是倾向于严格遵守 ES 标准，但这个新选项可以用于快速绕过 ES 标准的要求，很适合那些想要暂时专注于开发业务代码、不想花时间在兼容 ES 标准上的情况。 相关说明：https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#moduleresolution-bundler -------------------------- 我准备将我写的一些 NPM 包改为直接用 tsc 来输出，原因见 [开发 NPM 包时可能不需要将代码打包进一个文件里](https://github.com/lmk123/blog/issues/123) ## 对 build 命令进行改造 先介绍一下我要改造的第一个 NPM 包，它的...
今天要在 Windows 系统里调试一个 bug，所以又折腾了一下 Windows 的开发环境。 我之前是用 WSL 作为开发环境的（参考 #86 和 #89），今天我先试了下安装 Node.js 18。虽然用 nvm 成功安装了，但是在运行 `node -v` 时报错了： ``` node: /lib/x86_64-linux-gnu/libc.so.6: version 'GLIBC_2.28' not found (required by node) ```...
我目前正在写很多个 NPM 包。我使用 es module 写了源码，然后用 Rollup 将它们打包在一个文件里，并同时提供 CommonJS 和 es module 的格式。 但最近我开始意识到，我似乎不需要这样做。 我发现，将所有代码打包在同一个文件里的话，很难“优化”。 举个例子，浏览器扩展程序的代码有两种运行环境：内容脚本只能使用一部分 Chrome API，而扩展程序内的其它页面（背景页、弹出页页等）可以使用所有 Chrome API，这种情况下，我需要单独给内容脚本加一个 entry： ```js // index.js 导出全部 import { runInBackground, runInContent }...
一开始打算用 [Selenium](https://www.selenium.dev/)，但是我发现它的文档全没了，甚至连 v3 的文档也找不到了，只能放弃。 然后使用了 Jest + Puppeteer，成功创建了第一个测试： ```js test('安装划词翻译后，会打开一个欢迎页面', (done) => { browser.on('targetcreated', (target) => { expect(target.url()).toBe('https://hcfy.app/docs/guides/welcome') done() }) }) ``` > 搭建过程参考了以下两个链接： > - [Using with puppeteer -...