Preparación, instalación y configuración

  1. Crear las carpetas SRC donde tendremos nuestro código ES6 y output donde tendremos todo nuestro código compilado. Babel lo que busca son todos los archivos de la carpeta SRC y los compila a la carpeta output que son los que van a poner en el navegador
  2. Te vas a la documentación BabelJS Y COPIARAS npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/core es el nucleo de BabelJS, @babel/cli es su linea de comandos y @babel/preset-env es un preset que básicamente es una colección de pluggins, que lo que hará es convertir el código ES6 a JS
  3. Crear el archivo package.json y dentro pones una llaves así {} que es un objeto vacío, este objeto vacío nos servidá para NodeJS, ya que Node se encargará de identificar en nuestro paquete, todos los comandos que queremos tener disponible para nuestro proyecto y todas nuestras dependencias, que son todas las herramientas que necesita nuestro proyecto para funcionar, como BabelJS
  4. Instalas Babel usando la linea de comandos en tu terminal de Git en la ruta de tu proyecto, puedes abrir la terminal dando click derecho y git bash en la carpeta donde esta tu proyecto
  5. Copias y pegas este código después de las dependencias que instalaste. Aquí iran los scripts que queremos que se ejecuten con NodeJS, cuando ejecutemos algún comando

    "scripts": {

    "build": "babel src -d output --watch"

    }

  6. El comando de arriba quiere decir que ejecutemos BabelJS, encuentre la carpeta src, acceda a todos los archivos que tenemos dentro, luego que lo exporte compilado y lo ponga en la carpeta output y el --watch sirve para que el compilador este observando cambios siempre, el código de arriba lo puedes ver en este link también aquí viene el codigo de la configuración del archivo .babelrc
  7. Creas el archivo de configuración de BabelJS en la carpeta raiz de tu proyecto con la terminación .babelrc y pegas el siguiente código(con eso le indicamos con que preset queremos trabajar):

    {

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

    }

  8. Fijate que el preset que esta en el archivo .babelrc coincida con el del package.json, no le vaya a faltar algún caracter como un @ o algo así
  9. Puedes compilar usando el comdan npm run build
  10. Todo este proceso te creara una carpeta node_modules y un archivo package-lock.json
  11. Ahora en tu archivo html debes poner la ruta output/archivo.js para usar el codigo compilado
  12. Si falla algo apartir del --w, ve a la sección de WEBPACK, ahí está la configuración siguiente y si jala bien