46. Jak działa `@babel/preset-env` i jakie są jego zalety?

@babel/preset-env to inteligentny preset Babel, który pozwala na transpilację nowoczesnego kodu JavaScript do kodu kompatybilnego z określonymi przeglądarkami. Automatycznie wykrywa, które funkcje JavaScript są wspierane przez docelowe przeglądarki i ładuje tylko niezbędne pluginy i polyfille.

Główne funkcje @babel/preset-env:

1. Targetowanie przeglądarek: Pozwala na określenie docelowych przeglądarek za pomocą pliku konfiguracyjnego (np. browserslist).
2. Automatyczne ładowanie polyfilli: Dzięki opcji useBuiltIns, polyfille są ładowane tylko wtedy, gdy są potrzebne.
3. Modularność: Ładuje tylko te pluginy, które są niezbędne do transpilacji określonych funkcji JavaScript.

Przykład konfiguracji @babel/preset-env:

1. Instalacja:

npm install --save-dev @babel/preset-env

2. Konfiguracja pliku .babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead",
      "useBuiltIns": "entry",
      "corejs": 3
    }]
  ]
}

Zalety @babel/preset-env:

1. Optymalizacja kodu: Ładuje tylko niezbędne polyfille i pluginy, co minimalizuje rozmiar finalnego bundla.
2. Elastyczność: Umożliwia precyzyjne targetowanie przeglądarek, co pozwala na wykorzystanie nowoczesnych funkcji tam, gdzie są one wspierane.
3. Łatwość konfiguracji: Prosta konfiguracja umożliwia szybkie rozpoczęcie pracy.

@babel/preset-env jest niezbędnym narzędziem w nowoczesnym ekosystemie JavaScript, umożliwiającym pisanie przyszłościowego kodu, który działa we wszystkich przeglądarkach.