Cómo introducir el módulo externo de registro de babel
Entonces, te explicaré cómo sucede todo esto.
¿Por dónde empezar? Comencemos con el "empaquetado frontal".
Empaquetado front-end
Hace mucho tiempo (unos cinco años, pero el front-end ha cambiado mucho en estos cinco años), la compresión (ofuscación) JS de la página generalmente se realiza mediante la compilación cerrada de Google. El dispositivo está completo. Pero luego apareció Node.js y los desarrolladores front-end intentaron por primera vez usar Node.js para la compresión JS, a menudo usando uglify-js.
Una vez completada la compresión JS, ¿se puede completar la compresión CSS, se puede completar JS lint y se pueden completar las pruebas automatizadas? JS pelusa, ¿puedes hacerlo? ¿Se pueden realizar pruebas automatizadas? ¿No podemos simplemente fusionar archivos?
Aquí es donde entra en juego grunt, te ayuda a hacer todo esto con un simple archivo grunt.
Al mismo tiempo, surgieron AMD y CommonJS, Node.js usó CommonJS para cargar módulos y los navegadores usaron AMD para cargar módulos. La gente del front-end pensó que sería una buena idea estandarizar y escribir en CommonJS y utilizaron herramientas como browserify.
Bien, en este punto, parece ser un estándar que los proyectos front-end necesiten tener una tarea Grunt (y más tarde Gulp, etc.) para empaquetar los recursos front-end.
El auge de los frameworks
Las personas de front-end se han quejado de que el código escrito por principiantes que usan jQuery es como espaguetis, por lo que inventaron algunos frameworks al principio, los más populares. uno era el marco MVC (como Backbone.js), este tipo de marco no duró mucho, pero la gente del front-end se dio cuenta de que el marco MVC tenía mucho código similar para completar el trabajo de vincular eventos, actualizar vistas, etc.
Se descubrió el framework MVVM (un patrón de diseño con el que Microsoft había jugado en sus primeros años), y la biblioteca más famosa fue AngularJS.
En este momento, estas bibliotecas no requieren el uso adicional de Grunt para la traducción.
Hasta React, los ingenieros detrás de React (nota, no la gente de front-end) inventaron una nueva sintaxis llamada JSX que mezcla HTML y JS. La gente del front-end lo miró y decidió que ésta era la forma correcta de escribir plantillas. El único problema es que los navegadores no admiten esto, por lo que debes convertir JSX a JS.
En este punto, Grunt puede ser reemplazado por Gulp debido al bajo rendimiento.
En este punto, los proyectos que utilicen React utilizarán Gulp para convertir JSX a JS.
Desarrollo de ECMAScript
Al mismo tiempo, el desarrollo de ES también es muy rápido.
IE 8 no es compatible con ES5, por lo que el personal de front-end dijo: "Vete al diablo con IE 8" y ya no quiere admitir IE 8, porque el desarrollo móvil fue muy rápido en esos años, y Las páginas web eran principalmente páginas H5 (no preguntes si H5 es HTML5, no), por lo que mucho personal de front-end no necesita preocuparse por IE 8. Ahora que lo pienso, el fracaso de Windows Phone fue realmente una bendición para los usuarios de front-end. Buenas noticias para la parte delantera.
Cuando el front-end comienza a ponerse al día con cosas nuevas, debe ser el primero en utilizar la última versión de la sintaxis JS. Pero ni siquiera Chrome y Firefox pueden admitir la sintaxis más reciente tan rápidamente. Entonces la interfaz dice: "Simplemente agregamos otra traducción en Gulp y usamos Babel para traducir la sintaxis de ES 2016 a ES 5.
Entonces, hay una tarea más en Gulp.
Reflexión
Después de dos o tres años de rápido desarrollo, el personal de front-end debería reflexionar sobre el propósito de agregar tantas tareas de Gulp a la página web y si puede resolver el problema.
A juzgar por los resultados actuales, básicamente se puede resumir de la siguiente manera:
DOM no es fácil de usar, reemplácelo con DOM virtual
CSS no lo es fácil de usar, reemplácelo con CSS en JS
El JS compatible con el navegador no es fácil de usar. Cámbielo a la última versión de ES con sintaxis y luego tradúzcalo al JS compatible con. navegador
El evento DOM no es fácil de usar. Vaya a Crear un nuevo mecanismo de evento.
Gulp se usó en exceso y la visualización era lenta, por lo que agregamos un reemplazo de módulo activo.
Básicamente, tiramos todo lo que pudimos.
Estos cambios son realmente excelentes para aplicaciones web complejas, ¡pero el 90% de las páginas ni siquiera son aplicaciones de una sola página!
¿No puedo simplemente escribir un CSS y un JS y actualizarlos para ver el efecto? ¿Por qué dedico tanto tiempo a aprender herramientas de conversión y a resolver problemas de conversión?