AkiraZ's blog

When showing a webpack4-packaged project in Electron’s webview, an error xxx.split() is undefined occurs, causing the webview to display a blank page. The root cause is that the pbkdf2 package which is depended by webpack has an error code that is not compatible with Electron’s Node environment.

Root Cause

Electron application throws an error xxx.split() is undefined when loading a webpack4-packaged project in Electron’s webview. It is because webpack@4 is dependent on pbkdf2 package which is used for encryption and decryption. It referred like below:

具体场景是在使用 Electron 开发的桌面端应用中，使用 Webview 内嵌其它项目网页，初始化网页时报错xxx.split() is undefined 导致白屏。根因是 Webpack4 间接依赖 pbkdf2 包中有错误代码，导致在 Electron 的 Node 环境中不兼容。

根本原因

应用加载白屏报错 xxx.split() is undefined，排查根因发现这个报错来自底层依赖 pbkdf2 包。这个包由 webpack@4 引用，用于加解密功能。引用链路如下：

Since we require cookies when doing web development locally, there are two ways to do this:

• Copy & paste the cookies from the browser to the localhost
• Edit hosts file, forwarding url of test environment to 127.0.0.1

However, the first way is cumbersome, and the second way requires the edit permission. Therefore, there is another solution.

Installation

• SwitchyOmega is a browser extension, following the normal installation steps.
• Whistle is a npm package, which can be installed by npm install whistle -g. It usually starts an service on 127.0.0.1:8899.

由于在本地开发时需要获取测试环境的 Cookie，之前一般使用两种方法

• 把测试环境的 Cookie 修改到本地
• 调整 host 文件，把测试环境的域名指向127.0.0.1

两者都有点繁琐，而且后者依赖对 host 文件的权限，所以考虑换一套方案

安装 SwitchyOmega 和 whilstle

• SwitchyOmega 是一个浏览器插件，请使用通常安装插件的方式安装
• whilstle npm install whistle -g，随后按照提示操作，通常它会把服务开在127.0.0.1:8899

Vite 默认打包结果比较现代，有一定概率产生 js 的语法兼容性问题。Vite 默认在build.target中处理结果的目标版本。但是经观察似乎只会处理用户代码，并不会处理依赖中的不兼容问题，所以需要额外配置来做转换。这里的解决方案是使用@vite/plugin-legacy插件。

安装

1

npm install "@vitejs/plugin-legacy@4" -D

依赖大版本需要与vite大版本保持一致，本文假定vite@^4。

为什么需要 php-fpm

MediaWiki 默认使用 Apache 服务器，由于我的服务器上已经有了 Nginx，所以打算直接用 Nginx 转发。但是如果直接转发就会发现，访问index.php时会变成文件下载而不是网页，所以需要在 Nginx 中转发给 php-fpm，让 php-fpm 处理成 Html。

时代变了，ESLint 更新到9.x之后，废弃了部分对格式的规则，只保留了对语法的校验。所以如果需要 ESLint 自动化格式，需要安装额外的插件以及配置。

本文适用 eslint >= 9.0.0
本文包括 vue + typescript 的配置

安装

参考package.json配置

1
2
3
4
5
6
7
8
9
10
11
12

{
  "devDependencies": {
    "@eslint/js": "^9.16.0",
    "@stylistic/eslint-plugin": "^2.11.0",
    "@vue/eslint-config-typescript": "^14.1.4",
    "eslint": "^9.16.0",
    "eslint-plugin-vue": "^9.32.0",
    "globals": "^15.13.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.17.0"
  }
}

最近习惯用使用休眠关闭机器，但机器总是莫名其妙就被不知名硬件唤醒了，于是查了些指令在这记一下

可以唤醒系统的设备列表

1

powercfg -devicequery wake_armed

会列出所有可以唤醒系统的设备，之后去设别管理器，右键电源管理关闭。

抓出过很多内鬼，包括键盘鼠标甚至包括 xbox 手柄无线接收器

查看上次唤醒系统的设备

1

powercfg -lastwake

Sass 是流行的 CSS 的拓展语言，用过的工具有 sass、node-sass 和 sass-loader，相互之间有联系，配置的时候又经常遇到问题。简单总结一下。

sass 和 node sass

这两放在一起，因为都是 sass 编译工具。从本质上提供了对 sass 语法以及各类特性的支持。

CodeMirror 是一款网页中的代码编辑器，能提供例如高亮、缩进、行号、自动补全、语法检查等基础功能

https://codemirror.net/