ImmerJS 安装与版本选择指南

ImmerJS 安装与版本选择指南

immer immerjs/immer: Immer 是一个用于不可变数据处理的 JavaScript 库，可以用于构建不可变数据结构和应用程序，支持多种编程语言和框架，如 JavaScript，TypeScript，React，Angular 等。 项目地址: https://gitcode.com/gh_mirrors/im/immer

什么是 ImmerJS

ImmerJS 是一个 JavaScript 库，它通过使用不可变数据结构来简化状态管理。其核心思想是允许开发者以可变的方式编写代码，但实际上生成的是不可变的数据结构。这种方式既保持了代码的简洁性，又确保了数据的不可变性。

安装 ImmerJS

ImmerJS 可以作为直接依赖项安装，并且可以在任何 ES5 环境中运行：

通过包管理器安装

使用 Yarn 安装：

yarn add immer

使用 NPM 安装：

npm install immer

通过 CDN 引入

ImmerJS 也可以通过 CDN 引入，全局变量为 immer：

<!-- 使用 Unpkg -->
<script src="https://unpkg.com/immer"></script>

<!-- 使用 JSDelivr -->
<script src="https://cdn.jsdelivr.net/npm/immer"></script>

重要提示：使用 CDN 时，建议指定具体版本号，以避免未来更新导致意外问题。例如：

<script src="https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js"></script>

如果需要开发版本，可以将 URL 中的 production.min 替换为 development。

版本与功能选择

从 ImmerJS 6 版本开始，为了保持库的精简，一些不常用的功能被设计为可选功能，需要显式启用。这样可以确保在生产环境中打包时，不会包含未使用的代码。

可选功能列表

| 功能 | 描述 | 启用方法 | |------|------|----------| | ES2015 Map 和 Set 支持 | 使 Immer 能够操作原生 Map 和 Set 集合 | enableMapSet() | | JSON Patch 支持 | Immer 可以跟踪对草稿对象的所有更改，这对于使用 JSON Patch 通信变更非常有用 | enablePatches() |

使用示例

如果需要使用 produce 处理 Map 对象，需要在应用程序入口处启用此功能：

// 在应用程序入口处
import {enableMapSet} from "immer"

enableMapSet()

// ...后续代码
import {produce} from "immer"

const usersById_v1 = new Map([
    ["michel", {name: "Michel Weststrate", country: "NL"}]
])

const usersById_v2 = produce(usersById_v1, draft => {
    draft.get("michel").country = "UK"
})

体积分析

基础 ImmerJS 库压缩后约为 3KB，每个启用的插件会增加不到 1KB 的体积：

ImmerJS 导入体积报告:
┌───────────────────────┬───────────┬────────────┬───────────┐
│        (index)        │ 基础体积  │ 累计体积   │ 增量体积  │
├───────────────────────┼───────────┼────────────┼───────────┤
│ import * from 'immer' │   5033    │     0      │     0     │
│        produce        │   3324    │    3324    │     0     │
│     enableMapSet      │   4030    │    4039    │    715    │
│     enablePatches     │   4112    │    4826    │    787    │
└───────────────────────┴───────────┴────────────┴───────────┘

旧版 JavaScript 环境支持

默认情况下，produce 会尝试使用 Proxy 以获得最佳性能。但在一些旧版 JavaScript 引擎中（如 Microsoft Internet Explorer 或某些版本的 React Native），Proxy 不可用。

• 从版本 6 开始，必须通过调用 enableES5() 显式启用对回退实现的支持
• 版本 10 将完全移除回退实现，不支持 Proxy 的浏览器/引擎将无法使用

总结

ImmerJS 提供了灵活的安装方式和可选的特性支持，使其既能满足现代开发需求，又能保持精简的体积。开发者可以根据项目需求选择合适的功能集，并在旧环境中采取相应的兼容性措施。通过合理配置，可以在各种环境中享受 ImmerJS 带来的不可变数据管理的便利。

immer immerjs/immer: Immer 是一个用于不可变数据处理的 JavaScript 库，可以用于构建不可变数据结构和应用程序，支持多种编程语言和框架，如 JavaScript，TypeScript，React，Angular 等。 项目地址: https://gitcode.com/gh_mirrors/im/immer