Installatie

[Onofficiële Beta-vertaling]

Deze pagina is vertaald door PageTurner AI (beta). Niet officieel goedgekeurd door het project. Een fout gevonden? Probleem melden →

Immer kan als directe dependency worden geïnstalleerd en werkt in elke ES5-omgeving:

• Yarn: yarn add immer

• NPM: npm install immer

• CDN: Het beschikbare globale object is immer

  • Unpkg: <script src="https://unpkg.com/immer"></script>
  • JSDelivr: <script src="https://cdn.jsdelivr.net/npm/immer"></script>
  • ⚠️ Controleer bij gebruik van een CDN de URL in je browser om te zien naar welke versie deze verwijst. Zo voorkom je dat gebruikers per ongeluk een nieuwere versie krijgen bij toekomstige updates. Gebruik daarom een URL zoals: https://unpkg.com/immer@6.0.3/dist/immer.umd.production.min.js. Vervang production.min door development in de URL voor een development build.

Kies je Immer-versie

Dit gedeelte is alleen van toepassing op versie 6 en later

Om Immer zo klein mogelijk te houden, zijn niet-essentiële functies optioneel gemaakt en moeten ze expliciet worden ingeschakeld. Hierdoor nemen ongebruikte functies geen ruimte in wanneer je je applicatie voor productie bundelt.

De volgende functies kunnen worden ingeschakeld:

Feature	Description	Method to call
Array Methods optimization	Optimizes array method handling for improved performance with array-heavy operations	enableArrayMethods()
ES2015 Map and Set support	To enable Immer to operate on the native Map and Set collections, enable this feature	enableMapSet()
JSON Patch support	Immer can keep track of all the changes you make to draft objects. This can be useful for communicating changes using JSON patches	enablePatches()

Als je bijvoorbeeld produce op een Map wilt gebruiken, moet je deze functie eenmalig bij het opstarten van je applicatie inschakelen:

// In your application's entrypoint
import {enableMapSet} from "immer"

enableMapSet()

// ...later
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"
})

expect(usersById_v1.get("michel").country).toBe("NL")
expect(usersById_v2.get("michel").country).toBe("UK")

Standaard Immer begint bij ~3KB gzipped. Elke ingeschakelde plugin voegt daar ~1-2 KB aan toe. De uitsplitsing is als volgt:

Import size report for immer:
┌───────────────────────┬───────────┬────────────┬───────────┐
│ (index)               │ just this │ cumulative │ increment │
├───────────────────────┼───────────┼────────────┼───────────┤
│ import * from 'immer' │ 6908      │ 0          │ 0         │
│ produce               │ 4183      │ 4183       │ 0         │
│ enableMapSet          │ 4971      │ 4980       │ 797       │
│ enablePatches         │ 5335      │ 6097       │ 1117      │
│ enableArrayMethods    │ 4768      │ 6659       │ 562       │
└───────────────────────┴───────────┴────────────┴───────────┘
(this report was generated by npmjs.com/package/import-size)

Immer op oudere JavaScript-omgevingen?

Standaard probeert produce proxies te gebruiken voor optimale prestaties. Op oudere JavaScript-engines zoals Microsoft Internet Explorer of React Native (bij < v0.59 of bij gebruik van de Hermes-engine in React Native < 0.64 op Android) is Proxy echter niet beschikbaar. In die gevallen valt Immer terug op een ES5-compatibele implementatie die identiek werkt, maar iets langzamer is.

• Sinds versie 6 moet ondersteuning voor de fallback-implementatie expliciet worden ingeschakeld via enableES5().

• Versie 10 laat de fallback-implementatie volledig vallen en werkt niet in browsers/engines zonder Proxy-ondersteuning.