CDN 方式引入 Monaco Editor

在前端工程中可以用 @monaco-editor/loader 来引入 Monaco,但有时候我们的前端项目不依赖 Webpack、Vite 等打包工具,如何在普通网页中用纯 CDN 的方式引入 Monaco Editor?

阅读更多

鸿蒙 PC 编译运行 Electron 应用

华为推出的 MateBook Pro 首次搭载了鸿蒙 PC 操作系统,使其能够直接运行鸿蒙手机应用和鸿蒙平板应用,但仅仅这样只能称得上是『大号平板』。

Electron 框架是优秀的跨平台客户端框架,通过改造,鸿蒙 PC 上也能运行 Electron 应用,具体如何操作呢?

阅读更多

将扣子空间生成的 jsx 格式网页部署到自己的服务器

扣子空间生成的网页是 jsx 格式的,在扣子空间内可以正常打开,如果想要部署到自己的服务器,则需要经过编译。

为此,我写了一个模板,只需将扣子空间生成的 jsx 重命名为 coze.tsx(注意后缀要改为 tsx)放入本项目 src 目录,即可编译出可静态部署的 dist 产物。

阅读更多

Midscene.js:AI驱动的自动化测试工具

字节有一个很实用但不怎么火的项目,叫 Midscene.js,Chrome 商店上的安装数仅有 1 万,它是一个由多模态模型驱动的前端自动化测试插件。

Midscene.js 一共就三大 API:Action、Query、Assert

Action 交互

描述步骤并执行交互。例如,在 GitHub 上交互:查找 GitHub 上的 Twikoo 项目,点进详情页,点个 Star——

阅读更多

如何使用 yarn 或 pnpm 安装 sqlite3

Node.js 项目安装 SQLite 时需要下载预编译 bundle,默认是从 github.com 下载的,下载失败会走 node-gyp 本地编译,本地编译一般会因为缺少 Python、Visual Studio、Xcode 等环境而报错,所以需要配置镜像地址。

阅读更多

Node.js 版本与 ABI 版本对照表

因为下载 node-sass 的 binding.node 预编译二进制包时,发现网上竟然搜不到 Node.js 版本与 ABI 版本的对应关系,所以自己整理一份吧,数据来自三个地方,我做了整合:

  1. https://github.com/sass/node-sass/blob/master/lib/extensions.js
  2. https://github.com/electron/node-abi/blob/main/abi_registry.json
  3. https://github.com/electron/node-abi/blob/main/index.js
阅读更多

非管理员账户如何安装 Node.js 与快速切换版本

在企业环境中的电脑,往往严格管控着管理员权限,无法自由地安装软件。

  • 如何以普通用户的身份安装 Node.js?
  • 如何在需要低版本的 Node.js 时快速切换版本而不需要重新安装?

JDK 也适用于这种方式安装!只需多配一个环境变量 JAVA_HOME

阅读更多

使用 HTTP API 从 WPS 在线表格中获取数据

之前的博文中,我提到过本站的友情链接是通过 Vika 维格表管理的,维格表的一大特色是支持通过 API 增、删、改、查表格中的数据,这直接让维格表化身为一个简单的数据库,可玩性大大提升,通过它维护友链数据,并通过自己编写的脚本生成友链页面就是个例子。

阅读更多

VSLite 原理解析与本地化部署

VSLite 是一个开源的、完全运行在浏览器中的开发环境,它的亮点在于,不需要联网也可以直接在浏览器中使用 Node.js、Python、Git 等工具。你可以在 vslite.dev 体验到在线 demo。

传统的基于云的开发环境,例如 GitHub Codespaces,依赖于后端服务,前端所执行的命令,实际上是通过网络请求发送到后端对应的云虚拟机(或容器)中执行的,这就需要消耗后端的计算资源;而 VSLite 的思路完全不同,它在浏览器中启动了一个容器,做到了不再依赖后端。

想要在浏览器中跑起来一个容器,第一次听说这样的想法时,我说:不可能!绝对不可能!就浏览器这也受限那也受限的环境,还能跑起来一个操作系统?然而 StackBlitz 真的做到了,他们开发出了 WebContainers,WebContainers 是一个基于浏览器的运行时,用于执行 Node.js 程序和操作系统命令,完全在浏览器选项卡中。以前需要云虚拟机才能执行的应用,现在可以完全在浏览器端运行。

经过两天的研究,我开始对 WebContainers 的原理有了初步的了解。

阅读更多

解决火绒 6.0 造成的 Node.js fetch 方法 unable to verify the first certificate 报错

之前用 Electron 写了一个监控客户端,昨天突然用不成了,检查日志发现这样的一个报错:

1
2
3
4
5
6
7
8
9
10
11
12
Error occurred in handler for 'getPrice': TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:12293:11)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async WebContents.<anonymous> (node:electron/js2c/browser_init:2:78167) {
cause: Error: unable to verify the first certificate
at TLSSocket.onConnectSecure (node:_tls_wrap:1659:34)
at TLSSocket.emit (node:events:514:28)
at TLSSocket._finishInit (node:_tls_wrap:1070:8)
at ssl.onhandshakedone (node:_tls_wrap:856:12) {
code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'
}
}
阅读更多

HarmonyOS NEXT 应用开发踩坑笔记

What’s HarmonyOS NEXT

鸿蒙系统将移除 AOSP(Android 开源项目),不再兼容 apk 格式的安卓应用的安装。

比较 Harmony 与 Android

系统HarmonyAndroid
语言ArkTSJava
IDEDevEco StudioAndroid Studio
安装包格式APPAPK

API 版本

API 9 对应兼容安卓的鸿蒙,API 10 和 API 11 对应鸿蒙 NEXT。

阅读更多

导出百度地图收藏点列表

打开百度地图 https://map.baidu.com/fav/,登录自己的账号,按 F12 打开控制台,点击 Network,再按 F5 刷新页面,在 Filter 中输入 favdata,即可筛选出收藏点的 API 接口。如果你的收藏点多于 100 个,你会筛选出多个请求。依次点击每个请求,点击 Preview,展开 sync - newdata,右键 newdata,点击 Copy object 即可复制出来收藏数据。

阅读更多

解决 Electron 应用在国产信创 Kylin 系统下 new Date() 时区错误的问题

在做客户端国产化改造时,发现页面上的时间全都差了 8 个小时,打开控制台打印 new Date() 显示的时区是 GMT,进一步测试发现,只有 Kylin 桌面系统上有这个问题,统信 UOS 系统没问题,解决方法很简单,在程序启动前手动指定时区。

main.ts
1
process.env.TZ = 'Asia/Shanghai';

electron-forge 流水线踩坑记录

环境变量

  1. 环境变量 PATH 需包含 node、git 的可执行文件目录
  2. 在中国大陆跑,建议替换阿里镜像源提升依赖安装速度
1
2
3
registry=https://registry.npmmirror.com/
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/
阅读更多

Puppeteer 踩坑笔记

Puppeteer 是最常见的服务端 Node.js 网页转 PDF 工具库之一,原理是启动 Chromium 无头模式,打开网页,输出PDF,由于其原理是直接操控浏览器,导出的 PDF 几乎和网页效果一致。本篇记录一下踩坑经历。

我的 Puppeteer 版本:19.4.1

无法安装 puppeteer

  1. Node.js 要求 >=14.1.0
  2. Puppeteer 安装过程中默认访问 Google 服务器下载 Chromium 安装包,建议切换到阿里源进行安装。
1
npm config set PUPPETEER_DOWNLOAD_HOST=https://registry.npmmirror.com/-/binary
阅读更多

Node.js 实现 HTTP 访问日志

越来越咸,两个月没发文章了,刚刚换项目了,开始学一些新的知识。
近来调试 webhook 和 http callback 比较多,想要使用 Node.js 写一个接收所有 HTTP 请求,并把请求头和请求体写进log,返回 200 OK 的 service。

其实就是简单的 access.log 啦。
其实就是刚学习 Node.js 写的 demo 啦。
啊这是很简单你不要拆穿啦。

这是输出的 log 的样子,优化了可读性,时间、method、path、URL参数(Query)、请求头(Header)、请求体(Body)都详细记录了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
info: 2019-07-25 18:04:36
POST /v1.0/standard
Query:
search: keyword
Header:
cache-control: no-cache
postman-token: f4103067-4b07-447d-9fab-f09a75b6ddda
content-type: application/json
user-agent: PostmanRuntime/3.0.11-hotfix.2
accept: */*
host: localhost:4000
accept-encoding: gzip, deflate
content-length: 209
connection: keep-alive
Body:
appId: XXX
data:
userId: 123
requestId: 456
timestamp: 0
阅读更多