BABEL + WEBPACK

Babel: Es un transpilador de JavaScript. Permite usar las últimas características de JavaScript (como ES6/ESNext) y las convierte en un formato compatible con navegadores o entornos que no soportan esas características. 

Sitio oficial: https://babeljs.io/

1- Comandos para instalar los paquetes de babel :

npm install --save-dev @babel/core @babel/cli @babel/preset-env 

2- Crear un archivo de configuración nombrado babel.config.json (requiere v7.8.0 y mayor) en la raíz de su proyecto con este contenido o babel.config.js si está utilizando una versión Babel más antigua.

babel.config.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "firefox": "60",
          "chrome": "67",
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
} 

babel.config.js

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        firefox: "60",
        chrome: "67",
      },
      useBuiltIns: "usage",
      corejs: "3.6.4",
    },
  ],
];

module.exports = { presets }; 

3- Ejecutando este comando para compilar todo su código desde el src directorio a lib:

./node_modules/.bin/babel src --out-dir lib 

Puede utilizar el corredor de paquetes npm que viene con npm-5.2.0 para acortar ese comando reemplazando ./node_modules/.bin/babel con  npx babel

Tutorial:

• Webpack + Babel| Instalación :  https://youtu.be/wFyFpN4z9Nc 
• Babel + Webpack, práctico: https://youtu.be/EU53Lg-DSVM 

 

Configuración de Babel

 El siguiente código es una configuración de Babel que exporta un objeto para especificar los presets que Babel debe usar. Aquí está el análisis de cada parte:

module.exports = {
  presets: [
    "@babel/preset-env", // Transforma el JavaScript moderno
    "@babel/preset-react", // Transforma JSX
  ],
};

1. @babel/preset-env:
   • Este preset transforma JavaScript moderno (ES6, ES7, etc.) en un JavaScript compatible con navegadores o entornos antiguos.
   • Babel ajusta dinámicamente las transformaciones dependiendo de los navegadores o entornos objetivos que configures, lo que hace que sea muy poderoso.
2. @babel/preset-react:
   • Este preset transforma el código JSX que se utiliza en React en JavaScript normal que los navegadores pueden entender.
   • Permite usar la sintaxis <Component /> y convertirla en React.createElement().

 

Cómo mejorar la configuración?

El código es funcional, pero hay varias formas de optimizar y adaptarlo según tus necesidades:

1- Añade un target específico a @babel/preset-env: Puedes configurar los navegadores o entornos que deseas soportar. Por ejemplo:

presets: [
  [
    "@babel/preset-env",
    {
      targets: {
        browsers: ["last 2 versions", "ie >= 11"]
      }
    }
  ],
  "@babel/preset-react",
],
 

Esto asegura que no transformes innecesariamente características ya compatibles en los navegadores modernos.

2- Usa plugins adicionales: Si trabajas con React y estás usando cosas como React Hooks, puedes añadir el plugin correspondiente:

plugins: [
  "@babel/plugin-transform-react-jsx",
  "@babel/plugin-transform-react-display-name"
]
 

3- Divide la configuración según entornos: Si necesitas una configuración diferente para desarrollo y producción. Esto optimiza el rendimiento dependiendo de si estás desarrollando o publicando tu aplicación.

presets: [
  [
    "@babel/preset-env",
    {
      targets: process.env.NODE_ENV === "production" ? { browsers: ["last 2 versions"] } : { node: "current" }
    }
  ],
  "@babel/preset-react",
],
 

Configuraciones de Babel

Fragmento inicial

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}
        

• presets: Lista de ajustes predefinidos que indican cómo Babel debería transformar tu código.
• @babel/preset-env: Un ajuste que adapta el código para ejecutarse en los navegadores o entornos deseados.

Opciones dentro de preset-env

• targets: Define los navegadores y versiones que deben ser compatibles.
• useBuiltIns: Sólo incluye los polyfills necesarios según las características usadas.
• "usage": Sólo incluye los polyfills necesarios según las características que usas en tu código y el navegador especificado en targets.
  
• corejs: Indica la versión específica de Core-js que Babel debe usar para los polyfills.

 

Configuraciones avanzadas de Babel

Los presets son conjuntos predefinidos de reglas para transformar tu código. Puedes usar @babel/preset-env para elegir características específicas de JavaScript según el navegador objetivo.

1. Configuración básica y presets

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "12",
          "browsers": ["last 2 versions", "not IE 11"]
        },
        "useBuiltIns": "entry",
        "corejs": "3"
      }
    ]
  ]
}
        

• node: Indica una versión específica de Node.js.
• browsers: Define navegadores con palabras clave como "last 2 versions", que apunta a las dos últimas versiones de navegadores modernos.
  
• useBuiltIns: Con entry, se asegura de que los polyfills estén incluidos globalmente.
• corejs: Usa la versión 3 de Core-js.

2. Plugins avanzados

Los plugins en Babel permiten transformaciones específicas. Puedes incluir múltiples plugins para características avanzadas.

{
  "plugins": [
    "@babel/plugin-transform-runtime",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-proposal-private-methods"
  ]
}
        

• @babel/plugin-transform-runtime: Reduce el tamaño del código al reutilizar helpers.
• @babel/plugin-proposal-class-properties: Permite usar propiedades de clase en modo loose.
• @babel/plugin-proposal-private-methods: Habilita métodos privados en las clases.

3. Configuración avanzada con overrides

{
  "overrides": [
    {
      "test": "./src/legacy",
      "presets": [
        [
          "@babel/preset-env",
          { "targets": { "ie": "11" } }
        ]
      ]
    }
  ]
}
        

• test: Define un directorio o archivos que necesitan una configuración específica.
• targets: Establece navegadores como IE11 solo para archivos en ./src/legacy.

4. Ignorar archivos

{
  "ignore": ["test/**/*.js"]
}
        

• Ignora todos los archivos .js dentro de la carpeta test.

5. Configuración según entorno

{
  "env": {
    "production": {
      "presets": [
        ["@babel/preset-env", { "modules": false }]
      ],
      "plugins": ["transform-remove-console"]
    },
    "development": {
      "presets": ["@babel/preset-react"]
    }
  }
}
        

• production: Ajusta Babel para deshabilitar la transformación de módulos y remover console.log.
• development: Incluye @babel/preset-react para desarrollo con React.

6. Configuración en .babelrc

En lugar de usar package.json, puedes crear un archivo .babelrc con configuraciones específicas.


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

 Estas configuraciones avanzadas te permiten optimizar tu código y adaptar tu proyecto según tus necesidades.