Kas olete kunagi seadistanud Babeli? Mis see on? Kas olete kunagi koostanud Webpacki või kasutanud selle alternatiive?

Babel on transpilaator, mis konverteerib kaasaegse JavaScripti (ES6+) vanemasse versiooni, mida toetab enamik brausereid. Seda konfigureeritakse konfiguratsioonifaili (näiteks .babelrc) kaudu, kus määratakse vajalikud presetid ja pluginad.

Webpack on moodulite pakendaja, mis ühendab erinevad ressursid (JS, CSS, pildid) optimeeritud pakettideks brauserile. Selle konfiguratsioon võimaldab määrata sisendpunktid, loaderid erinevat tüüpi failidele ja pluginad optimeerimiseks.

Alternatiivid Webpackile on näiteks Rollup, Parcel või Vite, mis võivad olla lihtsamini konfigureeritavad või kiiremad.

Näide lihtsast Babeli konfiguratsioonist (.babelrc):

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

Näide Webpacki põhikonfiguratsioonist (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'
        }
      }
    ]
  }
};