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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Frontend - Page 2 | Spark1e的个人博客

## 最新的正确写法

```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'
```

使用WSL快速搭建开发环境

## Why not use Webpack 5 ?

因为目前有些大型的项目还在依赖Webpack4，比如我正在用的Storybook和flareact。

如果安装最新版的各种loader，最常见的错误就是`TypeError: this.getOptions is not a function`，所以要么开发时锁定loader版本，要么根据我下面的列表进行调整devDependencies。

## Lastest version of Webpack4 loaders

- css-loader@5.2.7
- sass-loader@10.2.0
- postcss-loader@4.2.0
- less-loader@7.3.0
- mini-css-extract-plugin@1.6.2
- copy-webpack-plugin@6.4.1

> Webpack4对于mjs文件处理存在问题，可以增加一条以下规则：
> ```javascript
> {
>     test: /\.mjs$/,
>     include: /node_modules/,
>     type: "javascript/auto",
> }
> ```

Webpack 4最后兼容的loader

## What is OpenSearch

OpenSearch是一个通用的搜索协议，主要是为了给浏览器提供“搜索引擎”探知，也就是说，支持了这个功能的网站，可以在较为新的浏览器地址栏添加搜索引擎或者直接进行搜索，如Gtihub和npm。

## Example

我们接下来以npmjs.com举例说明。

查看页面源代码，我们可以找到一行meta标签信息：

```html
<link data-react-helmet="true" href="https://static.npmjs.com/osd.xml" rel="search" title="npm package search" type="application/opensearchdescription+xml"/>
```

其中`type="application/opensearchdescription+xml"`声明了这是一条对OpenSearch支持的元信息，`rel="search"`，链接到了一个xml文档，我们打开可以看到：

```xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>npm</ShortName>
<Description>Search for packages on npm</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">https://static.npmjs.com/favicon-16x16.png</Image>
<Url type="text/html" method="get" template="https://www.npmjs.com/search?q={searchTerms}"/>
</OpenSearchDescription>
```

非常简单，首先最外层及OpenSearch协议标准，使用ShortName字段定义一个名称，可以带有描述、Icon，其中最主要的是Url字段。

这个字段提供了搜索需要的请求地址以及方法，在浏览器地址栏搜索时，会使用用户输入的字符替换`{searchTerms}`，并按照xml配置的方法进行请求，因此我们在自己实现时，主要需要将其修改为我们页面的搜索请求接口。

如何让网站支持OpenSearch

> 当前npm版本7.21.1，yarn使用classic版本，解决方案可能只适用于Linux环境下，请知晓。

### npm

#### npm install -g 各种权限问题

在初始化安装好node和npm后执行以下命令，设置对应目录的权限为当前用户：

```bash
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/lib/node_modules
# For npm version smaller than v7, the path may be `/usr/local/lib`
# sudo chown -R $USER /usr/local/lib/node_modules
```

#### npm lifecycle warning

```
npm WARN lifecycle The node binary used for scripts is /var/folders/g_/dslq6ff90pn_wyjv5g6578qm0000gn/T/yarn—1577473189287-0.1962072526914138/node but npm is using /usr/local/Cellar/node/13.5.0/bin/node itself. Use the `—scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
```

警告中已经提示了，需要执行 `npm config set scripts-prepend-node-path true` 解决。

### Yarn (Classic)

> npm遇到的主要是global安装的问题，主要涉及了相关的目录，以下[Yarn官方推荐的方案](https://classic.yarnpkg.com/en/docs/cli/global)也可以类比配置到npm已解决global安装问题。

#### Yarn全局安装到指定位置

```bash
yarn global add nodemon --prefix /usr/local
```

这样的好处是不必修改环境变量path，对于一到两个全局命令比较实用。

#### Yarn设置全局安装位置

```bash
yarn global bin
```

会回显目前的全局安装的可执行文件的系统链接位置，如果不希望设置到`/usr`相关的目录，则可以通过：

```bash
yarn config set prefix ~/.yarn
```

> `yarn global dir`会显示全局包的实际安装路径，如果磁盘容量有限可以考虑修改。

设置到其他目录，如果这样配置需要在全局环境变量增加yarn的全局位置，以bash为例，在文件最后添加一行：

```bash
export PATH="$(yarn global bin):$PATH"
```

npm/Yarn(v1)问题解决方案一览

在日常与 ~~黑洞~~ NPM Package 打交道的过程中，我们可以使用Github Dependent Bot等工具，检测项目中的哪些依赖可能存在隐患，对应什么等级，如果是使用npm，可以通过`npm audit fix`尝试自动修复，但是Yarn只提供了`yarn audit`检测，并没有合适的fix方法。

## [yarn-audit-fix](https://www.npmjs.com/package/yarn-audit-fix)

通过这个第三方包，可以间接实现`yarn audit fix`，详细使用请看文档，最简单的情况可以直接：

```bash
npm_config_yes=true npx yarn-audit-fix
```

## Can't find patched version that satisfies glob-parent@^3.1.0 in >=5.1.2

如果遇到类似的，无法跳版本升级的情况，可以通过下面的方式，强制跳版本更新，强烈建议更新后进行全面的测试。

```bash

```

Spark1e

Category: frontend