Už ste niekedy nastavovali Babel? Čo to je? Už ste niekedy zostavovali Webpack alebo používali jeho alternatívy?

Babel je transpiler, ktorý konvertuje moderný JavaScript (ES6+) na staršiu verziu, ktorú podporuje väčšina prehliadačov. Konfiguruje sa pomocou konfiguračného súboru (napríklad .babelrc), v ktorom sa špecifikujú potrebné presety a pluginy pre transformácie.

Webpack je modulárny bundler, ktorý kombinuje rôzne zdroje (JS, CSS, obrázky) do optimalizovaných balíkov pre prehliadač. Jeho konfigurácia umožňuje nastaviť vstupné body, loader-y pre rôzne typy súborov a plugin-y na optimalizáciu.

Alternatívy k Webpacku zahŕňajú napríklad Rollup, Parcel alebo Vite, ktoré môžu byť jednoduchšie na konfiguráciu alebo rýchlejšie.

Príklad jednoduchej konfigurácie Babel (.babelrc):

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

Príklad základnej konfigurácie 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'
        }
      }
    ]
  }
};