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 (NPM viene con Node.js, no necesita instalarlo por separado) Node.js y NPM (Vamos a instalarlo más tarde, no lo hagas ahora) Browserify (Vamos a instalarlo más tarde, no lo hagas ahora) Watchify 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 , puede ver un archivo llamado creado con las configuraciones proporcionadas por usted y crear un archivo en su proyecto o lo que haya proporcionado en el campo de entrada durante la inicialización. es6-app package.json index.js Instalemos el módulo npm llamado para calcular el tiempo de lectura del contenido como el que ves en Medium y nuestros otros requisitos previos. tiempo de lectura 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 creada en su directorio raíz y la entrada de dependencia en el archivo package.json. node_modules 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 , agregue el siguiente código. index.js 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. la palabra clave Nota: está utilizando **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 para que podamos usar las versiones convertidas en nuestro navegador. index.js Agregue los siguientes ajustes preestablecidos de browserify (dependencias) en su archivo package.json. (Consulte el cuando necesite ayuda) proyecto "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=" " /><script defer src=" "></script><script type="text/javascript" src="dist/bundle.js"></script></head> https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css https://use.fontawesome. com/releases/v5.1.0/js/all.js <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=" ">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=" ">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=" ">GitHub - aplicación es6</a></div></div></div></section></body> http://es6- Features.org/ https://medium.com/full-stack-web-development-from-scratch-to/use-es6-javascript-syntax-require-import-etc-in-your-front-end- project-5eefcef745c2 https://github.com/balasubramanim/es6-app </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 para ver y actualizar el archivo tan pronto como se actualice. npm run build $ 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.

Target

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

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

Demasiado Largo; Para Leer

Companies Mentioned

@balasubramanim

HISTORIAS RELACIONADAS