Los plugins de Babel son la herramienta central que integra todas las funcionalidades y el uso de Babel dentro del programa de un sitio web. Estos elementos son los encargados de realizar las transformaciones del código para cada uno de los navegadores que puede utilizar un usuario.

Estos plugins van a integrarse dentro del archivo de configuración dentro del programa de código.

A continuación, te contaremos en qué consisten los plugins de Babel, cómo se establece su sintaxis, cómo se organizan y cuáles son las opciones del plugin. Con todo esto, podrás crear un código mucho más compacto.

¿Qué encontrarás en este post?

Plugins de Babel

Los plugins de Babel son elementos que cumplen la función de transformar; es decir, hacen un trabajo propio para después unirse con el resto y poder transformar la sintaxis de los extractos de código. Puedes transformar una sintaxis moderna en una sintaxis mucho más antigua, que sea reconocida por navegadores anteriores. Los plugins de Babel son importantes, ya que se activan en el momento de transformar el código de Babel.

Por tanto, tienes que aprender en qué momento deberías activar los plugins para utilizarlos dentro de tu proyecto de código.

#agregar dentro del archivo de babel.congif.json
{
    "presets":  ['@babel/preset-env"]
}
#activar en la línea de comandos
npm install  @babel/preset-env -save-dev

Hay varios tipos de plugins que puedes integrar dentro de tu proyecto de código. En este caso, encontramos los plugins de transformación y los plugins de sintaxis. El primero realiza transformaciones sobre un código, mientras que el segundo aparece en muchos extractos, ya que transforma el código en casi todo momento.

De esta manera, también encontramos un orden en los plugins, que debe ser realmente cuidadoso, ya que será la forma en la que podríamos activarlo. Por ejemplo, debes tener en cuenta que los plugins se ejecutan antes que los preset.

Plugins List

Dentro de la documentación de Babel, vamos a encontrar explicado en qué consisten los plugins en Babel, así como todos los plugins que existen de acuerdo a la sintaxis que maneja cada una de las versiones del ECMAScript, las cuales pueden ir cambiando cada año. También vemos un conjunto de plugins que han sido desarrollados por el grupo TC39 de desarrolladores en JavaScript, formatos de los módulos o presets de React, entre otros. Todos estos se han extraído de la documentación de la lista de los plugins en Babel.

Propuestas de TC39

Estas son las propuestas de plugins que han creado el grupo de desarrolladores de TC39:

decoradores o @babel/plugin-proposal-decorators.
do-expressions o @babel/plugin-proposal-do-expressions.
export-default-from o @babel/plugin-proposal-duplicate-named-capturing-groups-regex.
export-namespace-from o @babel/plugin-proposal-export-namespace-from.
function-bind o @babel/plugin-proposal-function-bind.
function-sent o @babel/plugin-proposal-function-sent.
partial-application o @babel/plugin-proposal-partial-application.
pipeline-operator o @babel/plugin-proposal-pipeline-operator.
private-methods o @babel/plugin-proposal-private-methods.
throw-expressions o @babel/plugin-proposal-throw-expressions.
record-and-tuple o @babel/plugin-proposal-record-and-tuple.

ES2022

Para el ECMAScript del año 2022, se desarrollaron los siguientes plugins:

class-properties o @babel/plugin-proposal-class-properties.
class-static-block o @babel/plugin-proposal-class-static-block.
private-property-in-object o @babel/plugin-proposal-private-property-in-object.
syntax-top-level-await o @babel/plugin-syntax-top-level-await.

ES2021

Para el ECMAScript del año 2021, se desarrollaron los siguientes plugins:

logical-assignment-operators o @babel/plugin-proposal-logical-assignment-operators.
numeric-separator o @babel/plugin-proposal-numeric-separator.

Si quieres acceder al resto de módulos y plugins que se desarrollaron, puedes hacerlo desde el mismo sitio web.

Ya que sabes en qué consisten los plugins de Babel y cómo puedes configurar esta dependencia de JavaScript, estás listo para emplear este transpilador y empezar a trabajar con navegadores de diferente antigüedad, para que cualquier persona sea capaz de acceder a nuestro sitio web, sin importar la actualización que tenga en su navegador.

Si quieres seguir explorando temas relacionados, te invitamos a echarle un vistazo al temario del Bootcamp Desarrollo Web, que te permitirá convertirte en un experto en desarrollo web en cuestión de meses. Con una metodología propia centrada tanto en la teoría como en la práctica, así como la guía de grandes profesionales en el sector, serás capaz de triunfar en el mercado laboral IT. ¡No te pierdas esta oportunidad y accede ya mismo para pedir información y cambiar tu futuro!