Use la sintaxis de JavaScript ES6 (requerir, importar, etc.) en su proyecto de interfaz.

En este tutorial, usaremos la sintaxis de JavaScript avanzada en nuestra aplicación para mantener el código según los estándares más recientes y usaremos Node.js para importar módulos npm en nuestro proyecto de front-end.

¿Por qué necesita actualizar?

Cuando comencé a escribir JavaScript antes de los 4 años, las cosas eran totalmente diferentes. Usamos mucho jQuery, usamos scripts y etiquetas de enlace para incluir archivos JS y CSS en nuestra aplicación, y reemplazamos nuestro archivo cada vez que necesitamos actualizarlo.

Considere esta línea,

<script type="text/javascript" src="jQuery.js"></script>

Debe actualizar este archivo si lo ha estado usando localmente. De lo contrario, debe cambiar las versiones manualmente cuando lo necesite.

Considere esto a continuación,

importar jQuery desde “jQuery”;

¿Puedes ver la transformación? No necesita actualizar manualmente a ningún costo. Solo la actualización de npm actualizará todos sus módulos en su aplicación. No hay comandos separados ni funciona para nada. Puede incorporar herramientas y utilidades increíbles del ecosistema JavaScript más amplio de forma modular.

Entonces, cuando las cosas cambian, ¿por qué no lo hace su aplicación de front-end? Sí, es hora de actualizarse.

Mientras esté en Roma, ¿ser un ____? Sí, debería hacerlo cuando use JavaScript en el mundo actual.

requisitos previos

1. Node.js y NPM (NPM viene con Node.js, no necesita instalarlo por separado)
2. Browserify (Vamos a instalarlo más tarde, no lo hagas ahora)
3. Watchify (Vamos a instalarlo más tarde, no lo hagas ahora)

Codifiquemos

Instale todos sus requisitos previos.

Cree un directorio, navegue e inicialice su proyecto usando NPM emitiendo el siguiente comando.

$ mkdir es6-app$ cd es6-app$ npm init

Complete sus datos. Consulte la imagen a continuación para obtener más información.

Configuración de Package.json.

Puede dejar los campos vacíos y presionar Intro cuando no tenga valores para completar. Esto es solo una referencia y concentrémonos en nuestra aplicación ahora.

Ahora, en el directorio raíz de su es6-app , puede ver un archivo llamado package.json creado con las configuraciones proporcionadas por usted y crear un archivo index.js en su proyecto o lo que haya proporcionado en el campo de entrada durante la inicialización.

Instalemos el módulo npm llamado tiempo de lectura para calcular el tiempo de lectura del contenido como el que ves en Medium y nuestros otros requisitos previos.

En su directorio raíz, emita los siguientes comandos.

$ npm i browserify watchify --save $ npm i tiempo de lectura --save

Ahora puede ver la carpeta node_modules creada en su directorio raíz y la entrada de dependencia en el archivo package.json.

Instale las dependencias de desarrollo requeridas para sus conversiones de archivos.

$ npm i babel-core babel-preset-es2015 babelify --save-dev

Ha instalado todas las dependencias necesarias.

Ahora, en su archivo index.js , agregue el siguiente código.

importar tiempo de lectura desde "tiempo de lectura";

window.calcRT = ev => {var stats = readTime(ev.value).text;

document.getElementById("readingTime").innerText = stats;};

Aquí, importó el módulo npm de tiempo de lectura que instaló y obtuvo un texto de muestra del usuario para calcular el tiempo de lectura.

Nota: está utilizando la palabra clave **import** en su archivo JavaScript.

Los navegadores aún deben actualizarse para usar estas sintaxis y cuando los navegadores hagan esto en un futuro cercano, no sabemos cuál será la versión ES.

Necesitamos transpilar el archivo index.js para que podamos usar las versiones convertidas en nuestro navegador.

Agregue los siguientes ajustes preestablecidos de browserify (dependencias) en su archivo package.json. (Consulte el proyecto cuando necesite ayuda)

"browserify": {"transform": [["babelify",{"presets": ["es2015"]}]]}

junto con las otras configuraciones y reemplace la configuración de scripts con la siguiente.

"scripts": {"build": "browserify index.js -o dist/bundle.js","watch": "watchify index.js -o dist/bundle.js -v"}

Es hora de transpilar. Ejecute el siguiente comando para transpilar el archivo.

$ npm ejecutar compilación

Ahora su archivo se transpila y se crea en una carpeta llamada dist. Ahora agreguemos este archivo convertido en nuestro archivo HTML.

Cree un archivo html llamado index.html en su proyecto raíz y agregue los siguientes contenidos.

<!DOCTYPEhtml><html>

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>ES6 - Aplicación</title><link rel= "hoja de estilo" href=" https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css " /><script defer src=" https://use.fontawesome. com/releases/v5.1.0/js/all.js "></script><script type="text/javascript" src="dist/bundle.js"></script></head>

<body><section class="section"><div class="container"><div class="level"><h1 class="title is-4 level-item has-text-centered">Bienvenido a ES6 - APP</h1></div><div class="level"><h1 class="subtitle is-5 level-item has-text-centered">Aprender a usar <a href=" http://es6- Features.org/ ">Sintaxis de ES6</a> en su aplicación front-end</h1></div><br><div class="level"><p class="level-left level-item"> Escribe tu texto para calcular el tiempo de lectura</p></div><div class="level"><textarea class="textarea" onkeyup="calcRT(this)" placeholder="Agrega tu texto..."> </textarea></div><div class="level"><div class="level-left"><p>Tiempo de lectura: </p><p class="has-text-info" id=" readTime">0 min de lectura</p></div></div><div class="level"><div class="level-left"><p>Tutorial medio: </p><a target= "_blank" href=" https://medium.com/full-stack-web-development-from-scratch-to/use-es6-javascript-syntax-require-import-etc-in-your-front-end- project-5eefcef745c2 ">Utilice la sintaxis de JavaScript ES6 (requerir, importar, etc.) en su Fron t finaliza el proyecto.</a></div></div><div class="level"><div class="level-left"><p>Código fuente: </p><a target="_blank " href=" https://github.com/balasubramanim/es6-app ">GitHub - aplicación es6</a></div></div></div></section></body>

</html>

Eso es todo. Ha creado su proyecto front-end usando sintaxis avanzada de JavaScript. Espero que esto definitivamente actúe como una referencia para su próxima compilación.

Ahora, necesita automatizar su proceso de compilación. Ejecute el siguiente comando en lugar de npm run build para ver y actualizar el archivo tan pronto como se actualice.

$ npm ejecutar reloj

Has automatizado tu proceso con éxito.

Si tienes alguna duda, házmelo saber en la sección de comentarios. Muestre su aprecio manteniendo presionado el ícono de aplausos tanto como ama.

El proyecto final se puede encontrar aquí .

Juega con la aplicación es6 @ https://balsu.me/es6-app/

Gracias.