一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

原：vite打包react报错can't detect preamble

Vite插件开发适配中间件模式(middleware mode)

> 问题代码：[Github - vite-plugin-auto-mpa-html](https://github.com/iamspark1e/vite-plugin-auto-mpa-html/blob/b66aadacf15c251925b01900a7e37f6cf453ba9e/tests/entry.test.ts#L66)

通过排除法发现，[mock-fs](https://github.com/tschaub/mock-fs)与Vitest的覆盖率引擎（c8/istanbul 都有此问题）有冲突，报错：

```
Cannot find package '@vitest/coverage-c8' imported from /my/code/path/to/vite-plugin-auto-mpa-html/node_modules/local-pkg/index.mjs
```

一般来说，找不到包是因为没有安装到node_modules下，但是反复确认、重装后确认在目录内，那么问题就是出现在其他地方。检查coverage时的输出发现，没有引用mock-fs的测试可以顺利通过。

进一步排查，考虑到是模拟目录下没有node_modules目录，在模拟目录下增加，即，将外部完整的node_modules挂载到mock目录下：

```javascript
const mockedProject = {
  "node_modules": mock.load(
    path.resolve(__dirname, '..', "node_modules")
  ),
}
```

覆盖率测试可以通过。

所以目前锁定，如果使用mock-fs虚拟一个目录，那么vitest在生成覆盖率时会读取mock-fs的目录，进而产生了此问题。

### Dive In

To be continued...

一个意料之外的包冲突

使用Vitest生成覆盖率报告时报错的解决方案

### 0. 使用的webpack环境

由于基于webpack4，因此[这一步](https://www.netlifycms.org/docs/custom-widgets/#writing-custom-widgets-as-a-separate-package)npm安装的包应为：

```bash
npm install --save-dev babel-loader@7 babel-core babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react cross-env css-loader@5.2.7 html-webpack-plugin@4 netlify-cms react source-map-loader@1 style-loader@2 webpack@4 webpack-cli@4 webpack-serve
```

Netlify CMS开发widget

## 什么是合字(ligatures)？

> 在西方字体排印学中一般表示将多于一个字母的合成一个字形。如印刷品中常常将拉丁字母两个字母fi的i上一点常与f的一钩合并，而德语字母ß原为ss等等。 —— [维基百科](https://zh.wikipedia.org/wiki/%E5%90%88%E5%AD%97)

合字首先是服务于西方字体的印刷的，一般是由于两个字母的间距不易调大，此时两个字母存在易重叠的部分。早期电脑软件无法进行合字替换，但现在由于OpenType技术流行，合字逐渐恢复了使用。例如苹果设备最常见的PingFang SC。

## 合字比较常见的情况

fish (PingFang SC)
fish (Microsoft YaHei)
fish (Roboto)
fish (Helvetica)
fish (Times)

> 有条件的同学可以在不同系统（如Mac和Win下对比看看）

## CSS强制不合字

```css
font-variant-ligatures: none;
```

> font-variant-ligatures 还有很多有趣的值，可以参见[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)

当然，这个属性也需要参考其兼容性，[Caniuse](https://caniuse.com/?search=font-variant-ligatures)

还有一种另辟蹊径的办法，就是从成因来看，字符之间距离过近导致合字更适合打印，且美观，那么我拉长字符间距，也可以避免合字。

## Dive In

### 哪个部分使合字生效？

首先得是OpenType渲染，其次，这个合字有对应的Unicode字符，所以此处涉及了一对多的转换。

### 哪些语言有合字？

根据维基百科，常见的有：

- 拉丁文字
- 丹麦语和挪威语
- 法语
- 德语
- 冰岛语
- 瑞典语

非拉丁语言的文字，如汉字和日文，虽然存在合字，如“招财进宝合体字biang”

另外值得注意的是，有一些计量单位也存在合字的情况，如“㎉”。

合字 —— 一个被误认为Bug的Bug

前端测试时经常会被问到的fi合字问题

## 最新的正确写法

```css
word-break: normal;
overflow-wrap: anywhere;
```

来源：W3C文档，关于废弃属性值 `word-break: break-word;` 的平替解释 [Link](https://www.w3.org/TR/css-text-3/#word-break-property)

## 与之前的比较

在iOS15.7及其以前，都可以只用 `word-break: break-all;` 来实现，效果没有问题，但是在新的iOS16（16.0.2，16.0.3）样式显示均破坏，于是开始了debug……

## 废弃的属性？！

`word-break` 一共就那几个属性值，挨个试试吧。

试到 `word-break: break-word;` 的时候，好嘛，两边显示效果终于一致了。

但是MDN显示这是已经废弃的属性值啊([Link](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break))，怎么新版的safari反而支持回来了呢？

## 具体是否废弃，还得w3.org说了算

> w3c关于word-break的最新定义[地址](https://www.w3.org/TR/css-text-3/#word-break-property)

这里贴上一段在2022-10-13的w3c原文：

> For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

这段话概括来说就是，废弃了但是没完全废弃，对于传统内容，第一，`word-break: break-word` 还能用，暂时不废弃，安心用；第二，除了用废弃的这个属性，你也可以选择两个标准内的属性组合，实现break-word的效果，即开篇给出的 word-break + overflow-wrap的组合。

> 不过需要注意的是！Caniuse里对于`overflow-wrap: anywhere;` 的可用度可能不是最新的，里面标注iOS上的safari截至最新版本仍不支持，但是我在真机确实可以用的。

![`overflow-wrap: break-word`时，iOS16以上与原来的`word-break: break-all`一致](/img/uploads/overflow-wrap是break-word.jpg "`overflow-wrap: break-word`时，iOS16以上与原来的`word-break: break-all`一致")

![`overflow-wrap: anywhere`时，15.7 与 16 都能正常换行](/img/uploads/overflow-wrap是anywhere.jpg "`overflow-wrap: anywhere`时，15.7 与 16 都能正常换行")

word-break属性在iOS16下出现了问题

iOS16下的标准自动换行方式

## 0. pkg是真的很方便

[pkg](https://www.npmjs.com/package/pkg)是Vercel推出的一款打包工具，与Serverless正好相反，他的目的是打包为单文件、多平台可用的可执行文件。

对于一般的node应用，按文档例子配置即可，对于Next.js应用，需要进行以下的额外配置。

## 1. 配置

### 1.1 Install & Config

首先全局安装pkg

```bash
npm install pkg -g
# or
# yarn global add pkg
```

pkg可以通过命令行传参，也可以在package.json里进行配置，由于next.js略微复杂，这里示例在package.json

```json
  "pkg": {
    "assets": [
      ".next/**/*",
      ".env",
      "public/**/*"
    ],
    "scripts": [
      ".next/server/**/*.js"
    ],
    "targets": [
      "node14-linux-x64"
    ],
    "outputPath": "dist"
  },
  "bin": "index.js",
  "main": "index.js"
```

这里的index.js是官方的[Custom Server](https://nextjs.org/docs/advanced-features/custom-server)方式，pkg需要指定入口，因此不能使用原来的next包内的server。

> bin和main设置一个即可。

## 2. pack

打包过程基本不需要介入，我这里涉及了node的sharp包，需要额外引入，按照这个[issue](https://github.com/lovell/sharp/issues/826)的方案，复制相关的静态文件（或者dll）

请注意，如果使用了.env请务必引入在assets中。

使用pkg打包你的Next.js应用

## OL + LI

有HTML结构如下：

```html
<ol>
 <li>Text1</li>
 <li>
 	<ol>
 <li>Text2.1</li>
 <li>Text2.2</li>
 </ol>
 </li>
</ol>
```

## 利用CSS自动添加序号

```css
ol {
 counter-reset: section; 
 list-style-type: none;
}

li::before {
 counter-increment: section; 
 content: counters(section,".") " "; 
}
```

## 兼容性

> Caniuse [Link](https://caniuse.com/?search=counter-increment)

IE8及以上浏览器均支持，可以放心使用。

多级别列表使用CSS自动产生序号

> [MathJax's Home Page](https://www.mathjax.org/)

日常在一些页面里会用到Latex公式，在这一方面比较成熟的就是MathJax库，能够提供最为全面且方便的页面公式展示。

### 引入MathJax(v3)

```bash
npm i mathjax-full --save
# yarn add mathjax-full
```

Vue项目中import的内容需要通过Webpack处理，而MathJax最终的提供形式是挂载到window的，所以，在有需要的位置直接使用：

```javascript
import "mathjax-full/es5/tex-svg-full";
// import "mathjax-full/es5/tex-chtml-full"; // CHTML方式
```

### 在Vue项目中使用MathJax(v3)

在Vue项目中，我们习惯手工去触发渲染，因为大量的内容会动态生成。在手工触发时，调用以下方法:

```javascript
window.MathJax.typeset();
```

### 隐藏右键菜单

MathJax的功能对于公式展示而言，极为完备，甚至默认提供了右键菜单来让用户定制展示，对于B端项目，右键菜单并不是必要的，因此通过options将其关闭。

那么由于相关JS是通过直接import的方式引入的，无论是mount相关周期还是create相关周期，MathJax都已经初始化完毕，无法再配置。

所以，比较好的办法是在Vue的入口文件main.js内，直接全局优先定义options

```javascript
window.MathJax = {
  options: {
    enableMenu: false,
    processHtmlClass: 'tex2jax_process' // 指定需要处理的DOM元素类，避免全局遍历
  }
}
```

Vue项目中使用MathJax

说到解析字符串，第一时间，`new Date(dateString)`，但这样是存在问题的。

有如下一段非常简单的代码：

```javascript
new Date('2021-10-1 12:00:00')
```

请问他返回的是什么？

## 标准Date对象？No！

在IE下执行，返回 `[date] Invalid Date`;
在iOS(14.6)的Safari下执行，返回

```
[object Date]
null
```

虽然Date构造函数能够对日期字符串尝试进行解析，但是不同浏览器的支持程度并不一样，因此，贸然直接parse日期字符串是非常危险的。

## 正确方案

首先，目前绝大多数现代浏览器对于'/'的支持是ok的，所以简单而言可以进行正则匹配替换，即，

```javascript
new Date('2021/10/1 12:00:00')

// dateString.replace(/-/g, '/') // 需要注意，是否与UTC-时区的‘-’冲突
```

最好的办法是使用 [moment](https://momentjs.com/) / [day.js](https://day.js.org/) / [date-fns](https://date-fns.org/)

> moment由于“不可变”性以及使用的非现代API，目前不推荐使用，但其兼容性较好，请酌情。

如果不能够使用这一类库，就需要根据项目需要自行拆解，进而设置Date对象。

## 最佳方案

既然不应该使用日期字符串，那么毫秒数就是更好的选择啦！

正确的解析时间字符串

### WSL 是什么？

Windows Subsystem of Linux, 属于在Windows内加载的旁系统。WSL1与WSL2的实现不一致，WSL2更像是一个系统内的虚拟机，而WSL1是通过兼容层实现了类似与Linux的运行环境，如果涉及底层的一些操作或者命令则不存在。

更详细的对比请参阅: [Comparing WSL 1 and WSL 2
](https://docs.microsoft.com/en-us/windows/wsl/compare-versions)

### 对于前端同学的选择

我的需要最基本的有：可接受的文件io，Node.js，npm/yarn，容器（运行本地Debug环境）。

那么如上的需求，可以考虑WSL1+WSL2的搭配方案，即需要容器的环境使用WSL2挂载项目文件夹进行执行，否则则在WSL1内正常使用Node开发。

> 如果你能接受 __【挂载盘】较慢的io速度__ 以及 __每次需要现查的主机/WSL2 IP地址__ ，那么可以只使用一个WSL2环境。

### WSL快速配置

> 官方旧版安装指南 [Windows Subsystem for Linux Installation Guide for Windows 10](https://docs.microsoft.com/en-us/windows/wsl/install-manual)

> 2021-12-01 官方文档更新了，这个步骤不是很清晰，补充几个关键命令……

```powershell
wsl --install -d Debian # -d <DistributeName>
# 安装完毕后关闭WSL窗口，直接开始导出
wsl --export Debian C:\Debian.tar
wsl --import Debian-WSL1 <SomePathToDir> C:\Debian.tar
wsl --import Debian-WSL2 <SomePathToDir2> C:\Debian.tar
wsl --unregister Debian # 删除原来安装的默认版本
wsl --set-default Debian-WSL1 # 设置WSL1为默认版本
wsl --set-version Debian-WSL2 2 # 将其中一个版本转换为WSL2
```

这里我使用 Manual Installation，同时开启WSL2所需的Features，并安装Linux kernel update package。截止至Step4。

我选择不将所有WSL版本都设置为2，即不设置默认使用版本2。

这时安装的WSL即为一代，选择你希望安装的distribution，我这里选择的Debian。

正常安装并在内部配置好所需的开发工具后，将WSL1导出一份用来生成WSL2。

### 配置Node.js环境

前文赘述了不少关于npm的问题，其实根治的方案就是选择一个node版本控制工具，比如nvm，它会将不同版本的包管理在一个有权限的子目录内，“根本上”避免了权限问题。

> 这里我选择的nvm，官方Guide [Readme](https://github.com/nvm-sh/nvm#installing-and-updating)

安装好nvm并使用nvm安装Node.js以及其他工具如yarn等工具后，我们就可以开启“平行宇宙”，将环境一分为二了。

> Yarn (classic) 目前推荐的安装方案：`npm install -g yarn`

> "开启“平行宇宙”，将环境一分为二"的梗来自于Marvel的"What If..." 04，古一将Doctor Strange一分为二，使得同一时间线内有了两个Doctor Strange。

### 切分环境

打开PowerShell，确保容器目前处于关闭状态。

> 手工关闭，`wsl --shutdown`

首先需要把已有的导出为一个档案文件，

```cmd
wsl --export <DistributionName> <FileName>
```

导出后，再使用import进行导入，这里可以指定安装位置，因此 __也可以用来移动WSL安装位置__ :

```cmd
wsl --import <AnotherDistributionName> <InstallLocation> <FileName>
```

验证可以使用`wsl --list -v`，这时我们已经有了两个WSL1。接下来我们转换其中一个为WSL2

```cmd
wsl --set-version <AnotherDistributionName> 2
```

再执行`wsl --list -v`就可以得到两个版本的WSL共存了。

> 使用同一个环境切分，可以比较方便的处理同一个文件夹下的文件，避免了由于不同用户导致的权限问题。

### WSL2容器解决方案

> Docker Desktop v4开始，对于商业公司使用作出了明确限制，如果涉及商用，就需要使用付费plan，因此本文介绍的都是使用[Podman](https://podman.io/) 进行容器管理的方案。

#### Podman安装

其它WSL底层系统请参考[Podman Installation Instructions](https://podman.io/getting-started/installation)

```bash
sudo apt-get -y install podman
```

#### Podman登录Docker注册表

```bash
podman login your.registry.com
```

#### Podman拉取镜像并运行

```bash
podman pull <image>
podman run <custom-args> <image>
```

由于缺失systemd和journal，可能会启动时遇到报错，可以在执行时增加参数`--cgroup-manager=cgroupfs --events-backend=file`，或者直接在配置文件里进行全局设置：

```bash
vim /etc/containers/containers.conf
```

```conf
[engine]
events_logger="file"
cgroup_manager="cgroupfs"
```

#### Podman停止、列出镜像

```bash
podman ps -a
podman stop <container> && podman rm <container>
```

### WSL2实用命令

#### [如何获取主机IP](https://pscheit.medium.com/get-the-ip-address-of-the-desktop-windows-host-in-wsl2-7dc61653ad51)

```bash
ipconfig.exe | grep 'vEthernet (WSL)' -A4 | cut -d":" -f 2 | tail -n1 | sed -e 's/\s*//g'
```

Spark1e

Category: frontend