Hai mai configurato Babel? Cos'è? Hai mai compilato Webpack o usato alternative?

Babel è un transpiler che converte il JavaScript moderno (ES6+) in una versione più vecchia compatibile con la maggior parte dei browser. Si configura tramite un file di configurazione (ad esempio .babelrc), dove si specificano i preset e i plugin necessari per le trasformazioni.

Webpack è un bundler di moduli che combina varie risorse (JS, CSS, immagini) in bundle ottimizzati per il browser. La sua configurazione permette di impostare i punti di ingresso, i loader per diversi tipi di file e i plugin per l'ottimizzazione.

Le alternative a Webpack includono, ad esempio, Rollup, Parcel o Vite, che possono essere più facili da configurare o più veloci.

Esempio di configurazione semplice di Babel (.babelrc):

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

Esempio di configurazione di base di 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'
        }
      }
    ]
  }
};