Babel JS - narzędzie do kompilacji JavaScript

Główne funkcje i zastosowania Babel JS

Transpilacja

Babel kompiluje kod JavaScript z nowoczesnych standardów ECMAScript (np. ES6, ES7) do wersji, które są obsługiwane przez wszystkie przeglądarki. Dzięki temu programiści mogą korzystać z nowych funkcji języka bez obaw o kompatybilność.

Polyfills

Babel może dodawać polyfills, które emulują nowe funkcje JavaScript w starszych przeglądarkach. Na przykład, dzięki Babel, możemy używać Promise w przeglądarkach, które nie mają natywnego wsparcia dla tej funkcji.

Wtyczki

Babel jest modułowy i oparty na wtyczkach. Programiści mogą dodawać konkretne wtyczki, które transpilują specyficzne funkcje JavaScript. Przykłady wtyczek to: @babel/plugin-transform-arrow-functions do transpilacji funkcji strzałkowych czy @babel/plugin-transform-async-to-generator do transpilacji asynchronicznych funkcji.

Presets

Babel oferuje zestawy wtyczek zwane presetami, które można łatwo skonfigurować. Najpopularniejszy preset to @babel/preset-env, który automatycznie określa, jakie wtyczki są potrzebne w zależności od targetowanych środowisk.

Integracja z narzędziami build

Babel łatwo integruje się z popularnymi narzędziami do budowy projektów, takimi jak Webpack, Gulp czy Rollup. Umożliwia to automatyzację procesu transpilacji w trakcie budowania projektu.

Szukasz zaufanego wykonawcy projektów IT?

Skontaktuj się!

Instalacja Babel JS

Babel jest dostępny jako moduł Node. Instalacja, jak można się spodziewać, odbywa się za pomocą npm:

npm install babel-cli

Przykładowa konfiguracja Babel

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Przykład przedstawia, jak można skonfigurować Babel za pomocą pliku konfiguracyjnego. Pokazuje on, jak za pomocą presetu @babel/preset-env i wtyczki @babel/plugin-transform-runtime transpilować nowoczesny kod JavaScript do wersji kompatybilnej ze starszymi przeglądarkami. Konfiguracja ta jest podstawowym przykładem, jak rozpocząć pracę z Babel w projekcie.

Przykład zaawansowanej konfiguracji Babel JS:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
}

Przykład zaawansowanej konfiguracji Babel pokazuje, jak dostosować Babel do transpilacji nowoczesnego JavaScript i JSX do wersji zgodnych z różnymi przeglądarkami, w tym starszymi wersjami Internet Explorera. Konfiguracja używa presetów @babel/preset-env i @babel/preset-react oraz wtyczek @babel/plugin-transform-runtime i @babel/plugin-proposal-class-properties, aby zapewnić optymalizację kodu, automatyczne dodawanie polyfills i wsparcie dla klas ES6. Targets precyzują, jakie przeglądarki mają być wspierane, a useBuiltIns w połączeniu z corejs zapewnia dodawanie tylko potrzebnych polyfills.

Klasy w Babel JS

Poniżej znajduje się przykład klasy ES6:

class Person {
  // Konstruktor - wywoływany podczas tworzenia nowej instancji klasy
  constructor(name, age) {
    this.name = name; // Ustawianie właściwości 'name'
    this.age = age;   // Ustawianie właściwości 'age'
  }

  // Metoda klasy
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }

  // Inna metoda klasy
  haveBirthday() {
    this.age += 1;
    console.log(`Happy Birthday! I am now ${this.age} years old.`);
  }
}

// Tworzenie nowej instancji klasy
const person1 = new Person('Alice', 30);

// Wywoływanie metod instancji
person1.greet(); // Output: Hello, my name is Alice and I am 30 years old.
person1.haveBirthday(); // Output: Happy Birthday! I am now 31 years old.

Deklaracja klasy: Słowo kluczowe class jest używane do zdefiniowania klasy, a jej nazwa to Person.
Konstruktor: Metoda constructor jest specjalną metodą dla inicjalizacji nowo tworzonych obiektów. Przyjmuje dwa parametry, name i age, i przypisuje je do właściwości instancji.
Metody: greet i haveBirthday są metodami klasy, które mogą być wywoływane na instancjach klasy.
Tworzenie instancji: new Person(’Alice’, 30) tworzy nową instancję klasy Person z nazwą „Alice” i wiekiem 30 lat.
Wywoływanie metod: Metody greet i haveBirthday są wywoływane na instancji person1.

Konfiguracja Webpack z Babel:

Poniższa konfiguracja umożliwia Webpack przetwarzanie plików JavaScript za pomocą Babel, aby można było używać nowoczesnych funkcji JavaScript w kodzie źródłowym, a wynikowy kod był kompatybilny z szeroką gamą przeglądarek.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

FAQ – Frequently Asked Questions