# 以 fnm 管理 Node.js 版本：实践经验与取舍

对于需要在多个 Node.js 版本之间来回切换的团队而言，一个高效的版本管理器决定了日常开发体验。fnm（Fast Node Manager）正是为此而生：它由
Rust 编写，致力于用更快的速度、更低的资源占用解决多版本 Node 管理问题。本文结合实际使用，系统整理 fnm
的安装方式、使用步骤、优缺点、注意事项，并与常见工具进行了对比，帮助你更有底气地落地。

## 主要特性与亮点

1. **极快的启动速度**：Rust 实现带来更快的 CLI 响应，在频繁切换版本或多次打开终端时尤其明显。
2. **轻量级依赖**：fnm 自身安装包体积小，内部采用懒加载的方式下载 Node 版本，不会像 nvm 那样在 shell 初始化阶段执行大量脚本。
3. **跨平台支持**：macOS、Linux、Windows（含 PowerShell）都提供原生支持，对混合环境开发团队更友好。
4. **与版本文件联动**：默认支持识别 `.node-version`、`.nvmrc` 等文件，可在进入项目目录时自动切换 Node 版本。
5. **体验更现代**：支持 `--install-if-missing`、`--log-level` 等现代 CLI 选项，能够直接通过环境变量控制行为，便于自动化。

## 安装方式一览

### macOS / Linux

1. **Homebrew**（macOS 或 Linuxbrew）：
   ```bash
   brew install fnm
   ```
   Homebrew 会自动处理依赖，升级时只需 `brew upgrade fnm` 即可。
2. **脚本安装**（通用）：
   ```bash
   curl -fsSL https://fnm.vercel.app/install | bash
   ```
   该脚本会把执行文件放到 `~/.fnm` 并提示你如何修改 shell 配置。企业内网可替换成自建镜像地址。
3. **手动安装**：
    - 在 GitHub Release 下载压缩包。
    - 将二进制放到 `/usr/local/bin` 或 `~/bin`。
    - 在 shell 配置文件中手动添加 `eval "$(fnm env --use-on-cd)"`。

### Windows / PowerShell

- 使用 Scoop：`scoop install fnm`
- 使用 Chocolatey：`choco install fnm`
- 使用 Winget：`winget install Schniz.fnm`
- PowerShell 中需执行 `fnm env --use-on-cd | Out-String | Invoke-Expression` 来注入环境变量。

**安装完成后验证**：

```bash
fnm --version
which fnm        # 确保路径正确
```

## 基本使用步骤

```bash
# 安装常见操作
fnm list                      # 查看已安装的 Node 版本
fnm ls-remote                 # 查看可安装的远程版本
fnm install 18                # 安装 LTS 18（支持部分版本号）
fnm install --lts             # 直接安装最新 LTS
fnm use 20                    # 当前 shell 切换至 Node 20
fnm default 18                # 设置默认版本
fnm use --install-if-missing 16   # 缺失时自动安装

# 将环境自动注入 shell（例如 zsh）
eval \"$(fnm env --use-on-cd)\"
```

- 安装完成后建议把 `fnm env --use-on-cd` 的输出加入 `~/.zshrc` 或 `~/.bashrc`，这样进入不同项目目录时能自动检测版本文件。
- 如果项目使用 `.node-version`，只要文件内写着 `18.19.0` 之类的版本号，就能让 fnm 自动匹配。
- `fnm env --shell fish`、`fnm env --shell powershell` 可以生成不同 shell 所需的命令，避免语法不兼容。

## 进阶玩法与实战案例

### 为 Monorepo 统一 Node 版本

1. 在仓库根目录放置 `.node-version`，写入 `20.11.1` 这样的 LTS 版本。
2. 在 `package.json` 的 `engines.node` 中保持一致，形成双保险。
3. 配置 `.git/hooks/post-checkout` 或 `direnv`，在切换分支后运行 `fnm use --install-if-missing`，确保每位开发者都自动安装指定版本。

### 与 npm/yarn/pnpm 结合

- 可在 `package.json` 的 `scripts` 中直接调用 `fnm`：
  ```json
  {
    "scripts": {
      "dev": "fnm use --install-if-missing 18 && vite dev"
    }
  }
  ```
  适用于 CI/CD，避免构建机 Node 版本漂移。
- 如果还要固定 npm/yarn/pnpm 版本，可在 `postinstall` 中调用 `corepack enable`，或结合 Volta 只管理工具链，fnm 专注于 Node。

### 借助 alias 做多版本测试

```bash
fnm alias 18 lts
fnm alias 20 latest
fnm use lts
pnpm test
fnm use latest
pnpm test
```

在同一终端中就能快速切换 LTS 与 Current，对库作者非常实用。

### 控制缓存、镜像与日志

```bash
export FNM_MULTISHELL_PATH=~/.cache/fnm-shell
export FNM_NODE_DIST_MIRROR=https://npmmirror.com/mirrors/node/
export FNM_LOG_LEVEL=error
```

- `FNM_MULTISHELL_PATH` 可将临时 shims 放在自定义目录，方便在容器或只读系统中使用。
- `FNM_NODE_DIST_MIRROR` 解决内网下载慢的问题。
- `FNM_LOG_LEVEL` 能控制输出，CI 失败时更容易排障。

## 优点

- **速度快、体验流畅**：在 M 系列 Mac 或 Linux 上切换版本几乎没有感知延迟；终端初始化时也不会明显拖慢。
- **内置压缩缓存**：下载的 Node 版本会被缓存，重装同一版本时无需重新下载，大幅减少网络流量。
- **简洁命令语义**：命令与 nvm 几乎一致，迁移成本低；`fnm completions` 还能生成 shell 补全脚本，减少输入错误。
- **适合 CI/CD 场景**：通过 `fnm env --json` 导出设置，可在 CI 中快速切换 Node 版本而无需读取庞大的 shell 脚本。
- **易于脚本化**：`fnm current --format json` 等命令可程序化读取，方便写 lint 或守护脚本。
- **多 shell 友好**：官方提供 bash、zsh、fish、PowerShell、Nushell 等示例，节省配置时间。
- **二进制发布稳定**：Release 由 GitHub Actions 自动构建，checksum 公开，满足部分安全审计需求。

## 缺点

- **安装脚本差异**：部分旧教程仍以 curl/bash 脚本为主，但在企业环境下需要额外配置代理或镜像才能顺利执行。
- **插件不如 asdf 丰富**：fnm 专注 Node，本身并不管理其他语言；若团队还要统一 Python、Ruby 等，需要额外工具。
- **Windows 需额外适配**：PowerShell、Git Bash、WSL 的配置方式略有差异，新同事入场需要注意文档。
- **版本同步策略需自定**：fnm 不会自动更新 `.node-version`，仍需要团队约定流程（如 CI check）来避免乱序。

## 使用注意事项

1. **配置 PATH 先后顺序**：`fnm env` 输出的 PATH 需要排在系统 Node 之前，否则可能仍调用到系统自带版本。
2. **全局 npm 包位置**：切换 Node 版本后，全局 npm 包存放在各自的 `~/.fnm/node-versions/<version>` 目录，若依赖全局 CLI
   需重新安装。
3. **代理与镜像**：内网环境若需要代理，可通过 `FNM_NODE_DIST_MIRROR` 环境变量指向镜像站，以避免下载超时。
4. **与其他管理器共存**：如果同机还装了 nvm 或 asdf，要确保 shell 初始化脚本中只启用一个 Node 版本管理器，避免 PATH 冲突。
5. **CI 中缓存 node_modules 的策略**：切换 Node 版本会导致 node_modules 失效，记得把 Node 版本也纳入缓存 key，例如
   `node-${{ steps.fnm.outputs.node-version }}`。
6. **升级策略**：升级 fnm 后建议重新打开终端以载入最新 shim；如需脚本化，可在升级后执行 `hash -r` 清理 shell 的 command
   cache。

## 常见问题与排障

| 问题                  | 现象                 | 解决办法                                                                    |
|---------------------|--------------------|-------------------------------------------------------------------------|
| `node -v` 仍显示系统版本   | PATH 优先级不正确        | 确认 shell 配置中 `eval "$(fnm env)"` 在其他 Node 相关脚本之前                        |
| `fnm install` 速度极慢  | 访问官方镜像受限           | 设置 `FNM_NODE_DIST_MIRROR` 为公司镜像，如阿里云、腾讯云                                |
| CI 中 `fnm use` 失效   | 非登录 Shell 未加载配置    | 在脚本开头执行 `eval "$(fnm env --use-on-cd)"`，或直接 export `PATH`               |
| 多终端冲突               | 打开多个 shell 后切换版本异常 | 设置 `FNM_MULTISHELL_PATH` 为每个终端独立目录，或在 shell 退出时执行 `fnm env --uninstall` |
| `.node-version` 不生效 | 文件找不到              | 确保文件在项目根目录且没有多余空格；也可改用 `.nvmrc` 兼容其他工具                                  |

## 与常见方案对比

| 工具        | 语言支持        | 性能         | 学习成本                      | 适用场景                        |
|-----------|-------------|------------|---------------------------|-----------------------------|
| **fnm**   | 仅 Node.js   | 启动/切换速度快   | 与 nvm 类似                  | Node 项目为主、关注性能的个人或团队        |
| **nvm**   | 仅 Node.js   | shell 初始化慢 | 文档和社区丰富                   | 传统方案，团队已有大量脚本基于 nvm         |
| **asdf**  | 多语言插件       | 取决于插件      | 更复杂，需要管理 `.tool-versions` | 需要统一多语言版本管理的团队              |
| **Volta** | Node/JS 工具链 | 常驻后台，切换快   | 有独特命令体系                   | 需要固定 npm/yarn/pnpm 版本，关注稳定性 |

- 如果团队只管理 Node 版本且追求更快的开发体验，fnm 在大多数情况下都会优于 nvm。
- 如果还需要统一 npm、yarn、pnpm 的版本或锁定工具链，Volta 是不错的替代者。
- 若项目中存在多种语言，asdf 的插件系统能提供更通用的方案，只是操作体验更复杂。
- 在容器化或 serverless 环境中，如果需要每次冷启动快速拉起 Node，fnm 的二进制能力会比 nvm 的大量 shell 逻辑更占优势。
- 需要跨平台 + GUI 引导时，可考虑使用 `nvs`（Node Version Switcher），但其社区活跃度低于 fnm。

## 结语

fnm 并不是包治百病的工具，但在 Node.js 版本管理领域提供了一种高效、直接的方案。了解它的安装方法、进阶配置、优缺点以及与其他工具的差异，能让团队在选择版本管理器时更加自信。如果你正准备迁移
nvm、搭建多平台开发环境或优化 CI 时间，不妨尝试一次 fnm，把实践经验写进团队手册，让版本管理不再是日常开发的阻力。


【Fnm】Node 多版本管理

## 前言

在日常的 Web 开发中，尤其是在使用 Vue 或 React 等组件化框架构建的复杂项目中，我们经常会遇到一个痛点：如何在浏览器中快速定位某个 UI 元素对应的源代码？

通常，我们的做法是打开浏览器的开发者工具，审查元素，找到一个独特的 class 或 id，然后在整个项目中进行全局搜索。如果项目结构复杂、组件嵌套层级深，这个过程会变得非常繁琐和低效。为了解决这个问题，`code-inspector-plugin` 应运而生。

## 什么是 code-inspector-plugin？

`code-inspector-plugin` 是一个开发辅助插件，它允许你在浏览器中点击页面上的任意元素，就能自动在你的 IDE（如 VS Code, WebStorm）中打开对应的源代码文件，并精确定位到相关行。它就像一座桥梁，将浏览器中的视图和项目中的代码紧密连接起来。

## 为什么需要它？

使用 `code-inspector-plugin` 可以带来诸多好处：

1.  **极致的开发效率**：一键直达代码，省去了手动搜索文件的繁琐步骤，极大地提升了开发和调试效率。
2.  **快速熟悉新项目**：对于刚接触一个新项目或复杂模块的开发者来说，这是一个快速理解代码结构和组件划分的神器。
3.  **精准定位**：能够精确到代码行，无论是 HTML 结构还是组件引用，都能准确找到。
4.  **非侵入式**：它仅在开发环境下生效，不会对生产环境的代码产生任何影响。

## 如何安装和配置？

以你当前这个 Vite + Vue 项目为例，集成 `code-inspector-plugin` 非常简单。

### 1. 安装依赖

首先，在项目根目录下执行以下命令来安装插件：

```bash
pnpm add code-inspector-plugin -D
```

### 2. 配置 Vite

接下来，打开项目根目录下的 `vite.config.js` 文件，引入插件并进行配置：

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { codeInspectorPlugin } from 'code-inspector-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 在这里添加插件配置
    codeInspectorPlugin({
      bundler: 'vite',
    }),
  ],
  // ... 其他配置
})
```

只需简单的两步，配置就完成了！

## 如何使用？

1.  **启动项目**：运行 `pnpm run dev` 启动你的开发服务器。
2.  **打开浏览器**：在浏览器中访问你的项目。
3.  **激活检查器**：将鼠标悬浮在页面上，按下组合键（Mac: `Option + A` / Windows: `Alt + A`），此时插件会被激活。
4.  **点击元素**：激活后，你会看到鼠标悬浮的元素周围出现了边框提示。找到你想要查看的元素，单击它。
5.  **自动跳转**：IDE 会自动弹出，并打开对应的文件和代码行。

> **注意**：首次使用可能需要授权浏览器或操作系统与 IDE 通信。同时，请确保你的 IDE 已经配置了命令行启动器（例如 VS Code 的 `code` 命令）。

## 工作原理揭秘

`code-inspector-plugin` 的神奇效果背后，是一套巧妙的“编译时代码注入”和“运行时信息上报”机制。

### 1. 编译时：代码转换与信息注入

这是最核心的一步。插件在项目编译打包的过程中（例如 Vite 或 Webpack 构建时）介入，对源代码进行“改造”。

-   **AST 解析**：插件会使用 Babel 或 SWC 等工具将你的组件代码（如 `.vue` 或 `.jsx`）解析成一个**抽象语法树（AST）**。
-   **遍历与注入**：插件会遍历 AST，找到代表 HTML 标签或组件的节点，然后将该**代码的源文件路径、行号、列号等信息，作为特殊的 HTML 属性（例如 `data-v-inspector-file="path/to/YourComponent.vue"`）注入到这个标签上**。

因此，你写的代码在开发模式下，最终渲染到浏览器 DOM 中时，每个元素都携带了自己的“身份证”——它的源码位置信息。

### 2. 运行时：事件监听与信息捕获

插件还会在你的应用入口处注入一小段客户端脚本，它只在开发环境中运行，负责：

-   **监听组合键**：等待用户按下激活组合键。
-   **捕获鼠标事件**：激活后，监听鼠标的移动和点击事件。
-   **提取信息**：当用户点击某个元素时，脚本会立即读取注入的 `data-v-inspector-*` 属性，拿到该元素对应的文件路径和行号。

### 3. 通信：从浏览器到 IDE

拿到文件路径信息后，需要通知 IDE 打开它。

-   **启动本地服务**：插件会在启动开发服务器的同时，启动一个自己的小型 HTTP 中间件服务。
-   **发送请求**：浏览器端的脚本在获取到文件路径后，会立即向这个本地服务发送一个 HTTP 请求，并在 URL 中带上文件路径作为参数。
-   **执行 Shell 命令**：本地服务接收到请求后，会解析出文件路径，然后在你的电脑上执行一条命令行（Shell）命令来启动 IDE 并打开指定文件（例如 `code -g "/path/to/your/file:line:column"`）。

通过这个流程，`code-inspector-plugin` 优雅地实现了从浏览器视图到 IDE 代码的无缝跳转。

## 总结

`code-inspector-plugin` 是一个简单、强大且对开发者极为友好的工具。它通过打通浏览器和 IDE 之间的壁垒，解决了组件代码定位的难题，显著提升了开发体验和效率。如果你还没有尝试过，强烈建议在你的下一个项目中集成它，体验一下“指哪打哪”的快感！


【DEV】提升开发效率的利器：code-inspector-plugin

# 简介

在 **Electron** 里，**nodeIntegration** 这个属性控制着渲染进程能否使用 **Node.js** 的 **API**。当 **nodeIntegration** 设置为 **true** 时，渲染进程会和 **Node.js** 环境集成，这意味着在渲染进程的全局 **window** 对象上会暴露 **Node.js** 的全局变量和 API，其中就包括 **process** 对象。所以，开启 **nodeIntegration** 之后，可以通过 **window.process** 访问到 **Node.js** 的 **process** 对象。

# 检测

```javascript
if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
  return true;
}
```

【Electron】是否在 Electron 中运行

### 实时播放 pcm 流

```javascript
export class PCMPlayer {
  constructor(option) {
    this.init(option);
  }

  init(option) {
    const defaultOption = {
      inputCodec: 'Int16', // 传入的数据是采用多少位编码，默认16位
      channels: 1, // 声道数
      sampleRate: 8000, // 采样率 单位Hz
      flushTime: 1000, // 缓存时间 单位 ms
      fftSize: 2048 // analyserNode fftSize
    };

    this.option = Object.assign({}, defaultOption, option); // 实例最终配置参数
    this.samples = new Float32Array(); // 样本存放区域
    this.interval = setInterval(this.flush.bind(this), this.option.flushTime);
    this.convertValue = this.getConvertValue();
    this.typedArray = this.getTypedArray();
    this.initAudioContext();
    this.bindAudioContextEvent();
  }

  getConvertValue() {
    // 根据传入的目标编码位数
    // 选定转换数据所需要的基本值
    const inputCodecs = {
      'Int8': 128,
      'Int16': 32768,
      'Int32': 2147483648,
      'Float32': 1
    };
    if (!inputCodecs[this.option.inputCodec]) throw new Error('wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32');
    return inputCodecs[this.option.inputCodec];
  }

  getTypedArray() {
    // 根据传入的目标编码位数
    // 选定前端的所需要的保存的二进制数据格式
    // 完整TypedArray请看文档
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
    const typedArrays = {
      'Int8': Int8Array,
      'Int16': Int16Array,
      'Int32': Int32Array,
      'Float32': Float32Array
    };
    if (!typedArrays[this.option.inputCodec]) throw new Error('wrong codec.please input one of these codecs:Int8,Int16,Int32,Float32');
    return typedArrays[this.option.inputCodec];
  }

  initAudioContext() {
    // 初始化音频上下文的东西
    this.audioCtx = createWebAudioContext();
    // 控制音量的 GainNode
    // https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createGain
    this.gainNode = this.audioCtx.createGain();
    this.gainNode.gain.value = 1;
    this.gainNode.connect(this.audioCtx.destination);
    this.startTime = this.audioCtx.currentTime;
    this.analyserNode = this.audioCtx.createAnalyser();
    this.analyserNode.fftSize = this.option.fftSize;
  }

  static isTypedArray(data) {
    // 检测输入的数据是否为 TypedArray 类型或 ArrayBuffer 类型
    return (data.byteLength && data.buffer && data.buffer instanceof ArrayBuffer) || data instanceof ArrayBuffer;
  }

  isSupported(data) {
    // 数据类型是否支持
    // 目前支持 ArrayBuffer 或者 TypedArray
    if (!PCMPlayer.isTypedArray(data)) throw new Error('请传入ArrayBuffer或者任意TypedArray');
    return true;
  }

  feed(data) {
    this.isSupported(data);

    // 获取格式化后的buffer
    data = this.getFormattedValue(data);
    // 开始拷贝buffer数据
    // 新建一个Float32Array的空间
    const tmp = new Float32Array(this.samples.length + data.length);
    // console.log(data, this.samples, this.samples.length)
    // 复制当前的实例的buffer值（历史buff)
    // 从头（0）开始复制
    tmp.set(this.samples, 0);
    // 复制传入的新数据
    // 从历史buff位置开始
    tmp.set(data, this.samples.length);
    // 将新的完整buff数据赋值给samples
    // interval定时器也会从samples里面播放数据
    this.samples = tmp;
    // console.log('this.samples', this.samples)
  }

  getFormattedValue(data) {
    if (data instanceof ArrayBuffer) {
      data = new this.typedArray(data);
    } else {
      data = new this.typedArray(data.buffer);
    }

    let float32 = new Float32Array(data.length);

    for (let i = 0; i < data.length; i++) {
      // buffer 缓冲区的数据，需要是IEEE754 里32位的线性PCM，范围从-1到+1
      // 所以对数据进行除法
      // 除以对应的位数范围，得到-1到+1的数据
      // float32[i] = data[i] / 0x8000;
      float32[i] = data[i] / this.convertValue;
    }
    return float32;
  }

  volume(volume) {
    this.gainNode.gain.value = volume;
  }

  destroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
    this.samples = null;
    this.audioCtx.close().then();
    this.audioCtx = null;
  }

  flush() {
    if (!this.samples.length) return;
    const self = this;
    const bufferSource = this.audioCtx.createBufferSource();
    if (typeof this.option.onended === 'function') {
      bufferSource.onended = function (event) {
        self.option.onended(this, event);
      };
    }
    const length = this.samples.length / this.option.channels;
    const audioBuffer = this.audioCtx.createBuffer(this.option.channels, length, this.option.sampleRate);

    for (let channel = 0; channel < this.option.channels; channel++) {
      const audioData = audioBuffer.getChannelData(channel);
      let offset = channel;
      let decrement = 50;
      for (let i = 0; i < length; i++) {
        audioData[i] = this.samples[offset];
        /* fadein */
        if (i < 50) {
          audioData[i] = (audioData[i] * i) / 50;
        }
        /* fadeout*/
        if (i >= (length - 51)) {
          audioData[i] = (audioData[i] * decrement--) / 50;
        }
        offset += this.option.channels;
      }
    }

    if (this.startTime < this.audioCtx.currentTime) {
      this.startTime = this.audioCtx.currentTime;
    }
    // console.log('start vs current ' + this.startTime + ' vs ' + this.audioCtx.currentTime + ' duration: ' + audioBuffer.duration);
    // console.log('start', this.startTime);
    // console.log('duration', audioBuffer.duration);
    bufferSource.buffer = audioBuffer;
    bufferSource.connect(this.gainNode);
    bufferSource.connect(this.analyserNode); // bufferSource连接到analyser
    bufferSource.start(this.startTime);
    this.option?.onstart(audioBuffer.duration);
    this.startTime += audioBuffer.duration;
    this.samples = new Float32Array();
  }

  async pause() {
    await this.audioCtx.suspend();
  }

  async continue() {
    await this.audioCtx.resume();
  }

  bindAudioContextEvent() {
    const self = this;
    if (typeof self.option.onstatechange === 'function') {
      this.audioCtx.onstatechange = function (event) {
        self.audioCtx && self.option.onstatechange(this, event, self.audioCtx.state);
      };
    }
  }

}

export default PCMPlayer;
```

【小程序】播放 pcm 流

> 在上传文件时，为了降低后端服务器压力、提高上传速度等。可由前端直接上传至oss。
> 
> 当使用 npm 的方式使用 oss sdk 时，build 可能会异常。可以采用 cdn 的方式使用。
> 
> Github：[ali-oss](https://github.com/ali-sdk/ali-oss)

### 实现逻辑

如果是批量上传，则需控制上传队列，单个依次执行上传。

单个文件上传简单逻辑如下：

1. 获取 oss config
2. 初始化 oss sdk
3. 执行分片上传
   - 这里不论文件大小都采用分片上传的方式，目的是为了简化，统一逻辑。
   - 可针对不同文件指定不同的分片数量（例如：文件小于1MB则分1片）
4. 上传成功后上报 oss path

### 异常处理

1. 初始化 oss sdk 需要有 token，由于token直接输出至前端，出于安全考虑 token 必须设置有效期，例如 5 分钟。因此客户端需 在 token 过期之前，提前刷新 token。防止 token 过期导致上传失败。
   - 为什么 5 分钟有效期还不够用？客户端网络不可控
2. 在进行分片上传时，如果上传失败，可设置自动重试。重试次数可根据业务自定。
   - 断点续传？可根据业务自行实现。

### 能力扩展

1. 上传速度
   - 上传开始前 记录当前时间为开始时间
   - 通过上传的 progress 回调。可以获得上传进度，进而可以获取已上传的文件大小。如果以此刻为结束时间的话，那么就可大约计算出上传速度
   - 由于 progress 回调频率不够高，如果需要更高频率显示，可自行实现加速逻辑。比如在一次 progress 回调中计算多次结果。
2. 单文件上传进度
   - 通过 progress 回调根据已上传文件大小，计算得出当前上传进度。
3. 整体上传任务进度
   - 如果需要显示批量的进度，则可在每个文件上传后或者每个文件的 progress 回调（更精细的进度显示）中计算。 
4. 失败重试
   - 在上传失败时可设置自动重试逻辑。超过最大重试次数则最终上传失败。
5. 针对不同文件设置不同分片
    - 合理的分片能够更好的利用带宽，增加上传速度。
    - 同域名下的浏览器并发限制为6个（不同浏览器，不同版本可能限制存在差异，主要目的是需要合理的限制并发数）
    - 根据文件大小，以及并发数量，计算出分片数量以及每片大小。
6. 使用加速域名
   - 如果客户端由于地域原因导致上传慢或者失败。可在上传失败时启用加速域名进行加速上传（修改oss config）。
7. 文件检查
   - 在上传之前可简单进行文件类型，大小等检查。如果不符合业务则直接给出提示即可。

### 代码实现

- refreshSTSTokenInterval 可根据业务情况进行修改。
- calcPart 可根据业务情况自行实现。

```javascript
let client;

const uploadConfig = {
  fileList: [],
  params: new Map(),
  data: {},
};

const multipartUpload = (file) => {
  return new Promise(async (resolve, reject) => {
    const res = await getOssConfig();

    const startTime = Date.now();

    client = new OSS({
      ...getStsConfig(uploadConfig.data.sts_config),
      refreshSTSToken: async () => {
        const info = await getOssConfig();
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken,
        };
      },
      refreshSTSTokenInterval: interval * 60 * 1000,
    });

    client
      .multipartUpload(dir, file.file, {
        progress: (p) => {
          const costTime = (Date.now() - startTime) / 1000;
          const uploadedSize = ((file.file?.size || 0) * p) / 1024 / 1024;
          const fileSpeed = (uploadedSize / costTime).toFixed(2);

          console.table({
            '0-name': file.name,
            '1-fileSize': (file.file?.size || 0) / 1024 / 1024 + 'M',
            '2-progress': p * 100 + '%',
            '3-costTime': costTime + 's',
            '4-uploadedSize': uploadedSize + 'M',
            '5-fileSpeed': fileSpeed + 'M/s',
            '6-partSize': calcPart(file.file?.size || 0).partSize / 1024 / 1024 + 'M',
          });

          uploadConfig.speedMap[file.name] = fileSpeed;
        },
        ...calcPart(file.file?.size || 0),
      })
      .then((res) => {
        uploadConfig.retryMap[file.name] = 0;
        delete uploadConfig.speedMap[file.name];
        resolve(res);
      })
      .catch(async (err) => {
        if (err?.message?.includes('expired') && uploadConfig.retryMap[file.name] < 3) {
          try {
            uploadConfig.retryMap[file.name] += 1;
            uploadConfig.data = await getOssConfig();
            resolve(await multipartUpload(file));
          } catch (e) {
            reject(e);
          }
        } else {
          uploadConfig.retryMap[file.name] = 0;
          reject(err?.message || err?.name);
        }
      });
  });
};

function calcPart(size) {
  const mbSize = size / 1024 / 1024;

  const config = {
    parallel: 6,
    partSize: size,
  };

  if (mbSize > 12 && mbSize <= 50) {
    config.partSize = Math.ceil(mbSize / 6) * 1024 * 1024;
  }

  if (mbSize > 50 && mbSize <= 100) {
    config.partSize = Math.ceil(mbSize / 12) * 1024 * 1024;
  }

  if (mbSize > 100) {
    config.partSize = Math.ceil(mbSize / 18) * 1024 * 1024;
  }

  return config;
}
```


【OSS】前端直传 oss

> 在web项目日常更新中经常会遇到，代码更新后用户无感知。导致功能异常或者体验不到新功能。
>
> 因此需要更新提醒机制来主动告知用户，系统有更新需要重新加载。
>
> 以下方案暂不考虑轮询引起的压力问题。

**基本原理：请求远端标记与当前标记做判断，不一致则更新。**

### 方案一：请求静态文件

- 在 vue，react 等项目打包完成之后会生成静态js文件。
- js文件名称格式一般为 name+hash.ext，因此可以利用hash来进行判断是否有更新。
- 轮询请求入口html文件。利用正则获取 例如app_hash.js中的hash值，与当前文件中的hash值做比对，如果一致说明无更新，如果不一致给出更新提醒。

#### 优势

- 纯依赖前端，快
- 无需进行环境区分，直接请求当前环境文件即可

#### 不足

- 无法进行更精细化管理。只要hash不一致就会给出提醒
- 更新后 hash 如果未发生变化，则会视为无更新

### 方案二：请求约定文件

- 在打包完成后，在固定位置以及html中生成更新标记文件（更新标记的生成可由自动化脚本完成，更新标记可视情况决定是否需要），更新标记需包含以下内容
    - 标识：版本号、commit id或其他
    - 环境：dev、pro或其他
- 轮询请求更新标记，按照环境获取对应的标识与入口html中的标识来进行判断是否需要触发更新。

#### 优势

- 解决方案一的不足
- 不受项目限制，可按约定全项目通用

#### 不足

- 更新标记生成需要额外成本

### 注意

- 在请求静态文件或者更新标记时 GET 请求会有缓存，导致文件内容不更新
    - 可在请求url后增加 _t 参数，参数值为时间戳
    - 更换 POST 请求
- 部署方式不同可能会导致异常
    - 部署方式一：（入口html，静态资源）-> 服务器。一起更新则无问题。
    - 部署方式二：（静态资源）-> oss -> (入口html) -> 服务器。
        - 方案一无问题
        - 方案二则会发生：触发了更新提醒，但是刷新后依旧显示旧页面的问题。原因是因为静态资源更新时入口文件并为更新，此时如果刷新页面，则还是旧版本入口文件。因此需要增加逻辑判断，当入口文件中的标识与更新标记文件中的标识一致时才会触发更新。


【更新提醒】Web 实现更新提醒

> 在某些场景下，例如表单提交，经常会需要重置表单状态。可以通过以下的方式进行组件状态优雅重置。

### xxx写法

```vue

<template>
  <div>
    <div>{{ state.name }} - {{ state.age }}</div>
    <div @click="resetState">reset ref</div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';

  const state = reactive({
    name: 1,
    age: 2,
  });

  function resetState() {
    state.name = 1;
    state.age = 2;
  }
</script>
```

### Hook 封装

```javascript
import { ref, reactive } from 'vue';

function clone(value) {
  return JSON.parse(JSON.stringify(value));
}

export function useResettableRef(value) {
  const initialValue = clone(value);
  const state = ref(value);

  const reset = () => {
    state.value = clone(initialValue);
  }

  return [state, reset];
}

export function useResettableReactive(value) {
  const state = reactive(clone(value));

  const reset = () => {
    Object.keys(state).forEach((key) => delete state[key]);
    Object.assign(state, clone(value));
  }

  return [state, reset];
}
```

### Hook 使用

```vue

<template>
  <div>
    <div>ref：{{ refState.name }} - {{ refState.age }}</div>
    <div @click="resetRefState">reset ref</div>

    <div>reactive：{{ reactiveState.name }} - {{ reactiveState.age }}</div>
    <div @click="resetReactiveState">reset ref</div>
  </div>
</template>

<script setup>
  import { useResettableRef, useResettableReactive } from '@/hooks/index.js';

  const [refState, resetRefState] = useResettableRef({
    name: 1,
    age: 2
  });

  const [reactiveState, resetReactiveState] = useResettableReactive({
    name: 1,
    age: 2
  });
</script>
```


【Vue】Vue3 重置组件状态

### 背景

SharedArrayBuffer 是 JavaScript 中一种特殊的对象类型，用于在多个 Web Workers 或主线程之间共享内存。它与普通的 ArrayBuffer
类似，但 可以在多个线程中同时访问和修改。这种功能对于需要高性能并发处理的场景非常有用，比如实时数据处理、游戏开发、音视频处理等。

> 2017.7月（Chrome 60）引入 SharedArrayBuffer。
>
> 2021.7月（Chrome 92）限制 SharedArrayBuffer 只能在 cross-origin isolated 页面使用。（Spectre 漏洞）

### 解决方案

##### 一、不启用 SharedArrayBuffer

##### 二、 在 HTTP 响应头中添加以下两个安全标头：

1. Cross-Origin-Opener-Policy (COOP):
    - 将页面与其他来源的窗口隔离开来。
    - 推荐值：same-origin。
2. Cross-Origin-Embedder-Policy (COEP):
    - 确保页面中加载的资源具备同源性或具有适当的跨源授权。
    - 推荐值：require-corp。

示例配置：

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

##### 三、Chrome Origin Trials

申请地址：[Trial for SharedArrayBuffers in non-isolated pages on Desktop platforms](https://developer.chrome.com/origintrials/#/view_trial/303992974847508481)

### 参考资料

- [关于 SharedArrayBuffer spectre 攻击的讨论](https://github.com/tc39/security/issues/3)
- [使用 SharedArrayBuffer 进行 Spectre 攻击的原理](https://www.giantbranch.cn/2018/01/09/腾讯玄武实验室检测浏览器spectre的原理)
- [使用 COOP 和 COEP 将网站设置为“跨源隔离”](https://web.dev/articles/coop-coep?hl=zh-cn)
- [A year with Spectre: a V8 perspective](https://v8.dev/blog/spectre)


【Wasm】SharedArrayBuffer(SAB) is not defined

### 在 React 中进行模拟触发输入

> 参考：https://github.com/facebook/react/issues/11488

在自动化测试或在线调试React项目中，会遇到直接修改input的valut值UI变化，但是内部state并没有修改的情况。因此需要hack方法来解决：

```javascript
let input = document.querySelector('xxx');
let lastValue = input.value;
input.value = 'xxx';
let event = new Event('input', {bubbles: true});
event.simulated = true;
let tracker = input._valueTracker;
if (tracker) {
  tracker.setValue(lastValue)
}
input.dispatchEvent(event);
const enterKeyEvent = new KeyboardEvent('keypress', {
  key: 'Enter',
  keyCode: 13,
  code: 'Enter',
  which: 13,
  bubbles: true,
});
input.dispatchEvent(enterKeyEvent);
```

```javascript
const fileInput = document.querySelector('input[type="file"]');

async function simulateRemoteFileSelection(url) {
  const response = await fetch(url);
  const blob = await response.blob();

  const file = new File([blob], "file.mp4", {
    type: blob.type,
  });

  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(file);

  fileInput.files = dataTransfer.files;

  const event = new Event('change', {bubbles: true});
  fileInput.dispatchEvent(event);
}

simulateRemoteFileSelection('xxxx');
```

【React hack】在 React 中模拟触发输入

### 基于路由的访问控制（Route-Based Access Control）

> 前端 routes.js 中定义完整路由，每个路由 meta 信息中的 role 来标识权限值。登陆之后通过用户的权限过滤完整路由，最终生成用户路由。

#### 特点

- 集中管理：在 routes.js 中集中管理所有路由及其权限信息。
- 动态生成用户路由：用户登录时根据权限动态过滤路由，生成符合用户权限的路由配置。
- 基于角色的访问控制：通过 meta.role 来管理和控制角色权限，可以支持多角色的访问权限需求。

#### 流程

- 定义完整路由表：在 routes.js 中定义所有路由和对应的 meta.role 信息。
- 用户登录后获取权限：用户登录后，获取用户权限信息（如角色、权限 ID 等）。
- 动态过滤路由：根据用户的权限信息过滤完整路由表，生成仅包含用户有权限访问的路由。
- 动态注入路由表：将过滤后的路由表动态注入到路由配置中。

### 业务背景

> 基于上述流程。在实际业务中，如果用户进入无匹配路由页面时（**实际路由确实不存在、权限不足导致无匹配路由**），会重定向至 404
> 页面（此动作由 vue-router 的 路由匹配完成）。
>
> [捕获所有路由或 404 Not found 路由](https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#捕获所有路由或-404-Not-found-路由)

```javascript
// 需在用户路由表生成后添加
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: '/404',
};
```

#### 问题

通过以上操作，一旦匹配不到路由就会重定向至 404 页面。此时无法区分进入 404 的原因到底是因为 **实际路由不存在** 还是 **权限不足
**
**。

#### 解决方案

为了解决上述问题可以修改 **NotFound** 中的 **redirect** 如下:

```javascript
const NOT_FOUND_ROUTE = {
  name: 'NotFound',
  path: '/:pathMatch(.*)*',
  redirect: (to) => {
    console.log(to);
    return '/404';
  },
};
```

在将 **redirect** 配置项设置为方法后：

1. 参数 **to**：可以访问跳转前的路由信息，帮助了解用户试图访问的路径。
2. 方法 **router.getRoutes**：可以获取所有已注册的路由表，便于进行权限和路径验证。

在此基础上，需要实现以下两重判断：

1. 路径存在性判断：利用 **to.path** 检查目标路径是否在路由表中。
    - 若路径存在：说明目标路径已注册。（可忽略。~~进一步判断用户是否有权限访问。此时，如果用户跳转到了 **404**
      页面，通常意味着当前用户没有访问该路径的权限。~~）
    - 若路径不存在：说明路由没有进行注册。
2. 增加标记：可以通过修改 **to.query** 或其他方式，标记跳转到 **404** 的原因，便于前端展示不同的提示内容。

通过这种判断，能够精准地确认跳转至 **404** 的原因，进一步支持前端展示出更具体的权限提示信息。


【Vue router】动态路由匹配下的权限处理

> 在获取视频任意时刻的截图时，通常大多数的做法都是
> - 通过视频播放，canvas绘制
> - 借助ffmpeg
> 
> 除此之外，还有另外一种方式：URI Queries

### 使用方式

只需要在url后面带上#t=xx（秒）即可，如果是本地文件的话，上传之后需要拿到blobUrl

```html

<div>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=1.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=2.2"></video>
  <video src="https://www.w3school.com.cn/i/video/shanghai.mp4#t=3.5"></video>
</div>


<div>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=1.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=2.2"></video>
  <video src="blob:file:///123a3041-4ab9-4db8-adb7-56c46f3b156e#t=3.5"></video>
</div>


<script>
  fetch('https://www.w3school.com.cn/i/video/shanghai.mp4').then(res => res.blob()).then(blob => {
    const blobUrl = URL.createObjectURL(blob);
    console.log(blobUrl);
  })
</script>
```

到此就可以渲染出指定时刻的图片。就这？是的，没错，就这。

### 优点

- 快
- 简单

### 缺点

- 每一张图实际是一个video，会导致资源重复请求，视频文件过大，图片过多，网络压力较大。
- 请求网络地址进而转换成本地地址，虽然可以解决并发导致的网络压力，但是如果文件过大，首次加载依旧需要消耗比较长的时间。

### 总结

具体使用什么方式，还需根据业务需求决定。

> 参考文档：https://www.w3.org/TR/media-frags/#media-fragment-syntax

【秒级】获取视频时刻图

# 适用于Vite环境的JavaScript混淆插件

>仓库地址：[vite-plugin-bundle-obfuscator](https://github.com/z0ffy/vite-plugin-bundle-obfuscator)

## ⭐️ 特性

- [x] ⚡ 支持 Vite 项目中的 JavaScript 混淆。
- [x] 🚀 多线程支持，以获得更好的性能。
- [x] ⚙️ 可定制的混淆器选项，以满足您的需求。
- [x] 🛡️ 自动排除 node_modules。
- [x] 📦 支持 node_modules 拆分块。

## ⚠️ 注意

- 如果打包过程中出现内存溢出。修改打包命令为：cross-env NODE_OPTIONS=--max-old-space-size=8192 VITE_CJS_IGNORE_WARNING=true vite build，其中 max-old-space-size 根据机器配置自行设置。
- 在设置 node_modules 分包时，请把准确的包名前置。例如：["vue-router", "vue"]，"vue"可以同时匹配到 vue 以及 vue-router。

## 🌐 在线示例

✦ [Vite - Vanilla](https://stackblitz.com/edit/vitejs-vite-zsytij?file=vite.config.js)
✦ [Vite - Vue](https://stackblitz.com/edit/vitejs-vite-ywho91?file=vite.config.js)
✦ [Vite - React](https://stackblitz.com/edit/vitejs-vite-wyeur4?file=vite.config.js)
✦ [Vite - PReact](https://stackblitz.com/edit/vitejs-vite-oujmks?file=vite.config.js)
✦ [Vite - lit](https://stackblitz.com/edit/vitejs-vite-ru4gws?file=vite.config.js)
✦ [Vite - Svelte](https://stackblitz.com/edit/vitejs-vite-fthdtu?file=vite.config.js)
✦ [Vite - Solid](https://stackblitz.com/edit/vitejs-vite-dcx3eh?file=vite.config.js)
✦ [Vite - Qwik](https://stackblitz.com/edit/vitejs-vite-i2bjvq?file=vite.config.js)
✦ ...


## 📦 安装

```bash
# 使用npm
npm install vite-plugin-bundle-obfuscator -D

# 使用pnpm
pnpm add vite-plugin-bundle-obfuscator -D

# 使用yarn
yarn add vite-plugin-bundle-obfuscator -D
```

## 👨‍💻 使用

1. 使用您首选的软件包管理器安装插件。
2. 在vite.config.js中注册插件。
3. 自定义混淆器配置或使用默认选项。

示例:

```javascript
import vitePluginBundleObfuscator from 'vite-plugin-bundle-obfuscator';

const defaultObfuscatorConfig = {
  excludes: [],
  enable: true,
  log: true,
  autoExcludeNodeModules: false,
  threadPool: false,
  options: {
    compact: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 1,
    deadCodeInjection: false,
    debugProtection: false,
    debugProtectionInterval: 0,
    disableConsoleOutput: false,
    identifierNamesGenerator: 'hexadecimal',
    log: false,
    numbersToExpressions: false,
    renameGlobals: false,
    selfDefending: true,
    simplify: true,
    splitStrings: false,
    ignoreImports: true,
    stringArray: true,
    stringArrayCallsTransform: true,
    stringArrayCallsTransformThreshold: 0.5,
    stringArrayEncoding: [],
    stringArrayIndexShift: true,
    stringArrayRotate: true,
    stringArrayShuffle: true,
    stringArrayWrappersCount: 1,
    stringArrayWrappersChainedCalls: true,
    stringArrayWrappersParametersMaxCount: 2,
    stringArrayWrappersType: 'variable',
    stringArrayThreshold: 0.75,
    unicodeEscapeSequence: false,
  }
};

export default {
  plugins: [
    // vitePluginBundleObfuscator()
    vitePluginBundleObfuscator(defaultObfuscatorConfig)
  ]
};
```
