Czy kiedykolwiek konfigurowałeś Babel? Co to jest? Czy kiedykolwiek kompilowałeś Webpack lub używałeś jego alternatyw?

Babel jest transpilerem, który konwertuje nowoczesny JavaScript (ES6+) na starszą wersję obsługiwaną przez większość przeglądarek. Konfiguruje się go za pomocą pliku konfiguracyjnego (np. .babelrc), w którym określa się presety i pluginy potrzebne do transformacji.

Webpack to bundler modułów, który łączy różne zasoby (JS, CSS, obrazy) w zoptymalizowane pakiety dla przeglądarki. Jego konfiguracja pozwala ustawić punkty wejścia, loader'y do obsługi różnych typów plików oraz pluginy do optymalizacji.

Alternatywy dla Webpack to np. Rollup, Parcel czy Vite, które mogą być prostsze w konfiguracji lub szybsze w działaniu.

Przykład prostej konfiguracji Babel (.babelrc):

{
  "presets": ["@babel/preset-env"]
}

Przykład podstawowej konfiguracji Webpack (webpack.config.js):

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};