Vea con qué facilidad puede actualizar a Webpack

He escrito este artículo para narrar la aventura que me sucedió al actualizar un proyecto AngularJS de Grunt a Webpack.

Foto de Tyler Franta en Unsplash

Puedes seguirme en Twitter o consultar mis últimos artículos en mi sitio yaabed.com. Además, tengo mi publicación en medium blog.yaabed.com.

El principal problema que existía eran unos 500 elementos arrojados al objeto de la ventana. Esto le permite acceder a ellos desde cualquier lugar que necesite. También hace que la ventana sea la herramienta de navegación para módulos y componentes. El proyecto se vuelve más acoplado y no sabes quién los está usando.

Los archivos están estructurados usando la arquitectura del módulo pero sin usar angular.module. Los archivos se dividen en carpetas por nombre como HomePage. La carpeta HomePage contiene su controlador, estilo y vista.

Lo primero que se me ocurrió fue refactorizar toda la aplicación para usar webpack, módulos, babel y es6. Después de investigar, es posible hacer esto sin ninguna refactorización de la base de código. Pero, hay muchos problemas que resolver antes de comenzar a agregar webpack al proyecto.

Problemas a considerar antes de comenzar a trabajar

  • Cómo resolver el problema del objeto de ventana, porque webpack muestra los archivos como un árbol de archivos que se comunican entre sí.
  • Cómo hacer menos cambios al proyecto sin fusionar problemas.
  • Cómo dividir entre desarrollo y producción para el paquete web.
  • Cómo eliminar las dependencias de Bower, porque webpack resuelve principalmente los módulos de npm.
  • Cómo las actualizaciones a webpack resuelven el gran tamaño de los archivos JavaScript.
https://www.pexels.com/photo/technology-computer-desktop-source-code-113850/

Comienza a dividir las cosas en pasos

Actualice la versión del nodo de 0.10 a la última versión disponible

Antes de comenzar a usar webpack, necesitaba actualizar la versión de Node con la que funciona webpack v3. Pero, Grunt está usando cosas obsoletas, así que cuando actualicé la versión Node, ¡nada funcionó! Así que comencé a corregir los errores uno por uno para asegurarme de que la actualización fuera posible.

Primero, se produjo un error en los viejos grunt-sass y node-sass. Ya no es compatible con esta versión de Node. Para solucionar esto, actualicé grunt-sass de ‘0.18.1’ a ‘2.0.0’, luego actualicé node-sass para que sea ‘4.7.2’.

En segundo lugar, tratar de actualizar Grunt de ‘0.4.5’ a 1.0.0 ’no funcionó, porque los complementos de Grunt necesitan grunt@0.4.5 como dependencia entre pares. Así que me quedé con la versión 0.4.5.

Corrección de errores que se muestran en el servidor de nodo express

Tuve que corregir los errores con el servidor de Nodo rápido, porque el constructor bodyParser está en desuso y necesita ser cambiado. Cambié de

a

Eliminar cosas obsoletas

  • Atributo de depuración de grunt-express porque está en desuso en la nueva versión del inspector de nodos.
  • Elimine la tarea bower-install del proyecto.

Comience a agregar webpack

Agregué webpack al proyecto usando npm install webpack - save-dev. Luego agregué el archivo `webpack.config.json`.

Cuando comencé este paso, me quedé atascado porque la estructura del proyecto no tiene un punto de entrada. Todo el proyecto depende de una fuente, que es la ventana. Webpack necesita un punto de entrada para comenzar y un punto de salida para terminar.

Para resolver esto, creé un punto de entrada. Configuré todos los archivos necesarios en él y le di el mismo nombre en la configuración de GruntJS para concatenarlo como lo hizo la compilación anterior. Pero esto iba a llevar mucho tiempo, porque se incluyeron alrededor de 550 elementos en index.html.

Para resolver este problema, utilicé un RegExp /"(.*?)"/ig y reemplacé los valores por require (src) para obtener las fuentes del atributo src y convertirlo a require (src). Lo pegué en el entry.js en el mismo orden que el antiguo index.html.

Después de esto, el resultado fue un archivo JS significativo que contiene todos los scripts. ¡Pero nada funcionó! Después de investigar lo que estaba sucediendo, parecía que webpack funcionaba por defecto como módulos. Si hay exportaciones o exportaciones predeterminadas en el mismo archivo, no se exportará nada al exterior, incluso si lo incluye usando require js.

Antes de buscar una manera de resolver esto, comienzo a agregar module.exports a todos los archivos que necesitan exportarse, ¡antes de comprender claramente cómo funciona el paquete web! Después de dos días de trabajo, descubrí que hay algo llamado cargadores que resuelve el problema.

Al agregar esto a webpack.config.js, ¡todos los archivos ahora estaban disponibles como el comportamiento anterior!

Y todo estaba funcionando ahora.

Próximo paso

Después de que el proyecto funcionara con Grunt, necesitaba asegurarme de que tanto Webpack como Grunt trabajaran juntos. Así que hice pruebas para asegurarme de no perderme nada.

Para que esto suceda, creo un nuevo archivo llamado inject-HTML.files.json. Este archivo contiene todos los archivos fuente para usar con usemenPrepare en Grunt y webpack para crear las entradas como elementos múltiples como matrices tomadas de los archivos JSON de inyección de HTML.

Me encanta esta imagen, escribir código y tomar un café :) https://www.pexels.com/photo/high-angle-view-of-coffee-cup-on-table-317385/

Actualice el antiguo archivo de configuración de Grunt

Agregar archivos a concat

Compruebe si Webpack se compila, luego elimine el JS de las configuraciones

Agregar nuevo script npm

Archivo Webpack.config.js

Archivo Webpack.prod.js

Motivaciones

Mantenimiento y calidad del código

  • Resuelva el problema con la creación de archivos, ya que el proyecto está creciendo rápidamente.
  • Resuelva el problema de que hay demasiadas cosas adjuntas a la ventana sin razón.
  • Haga que la base de código sea más fácil de entender.

Eficiencia de desarrollo

  • Bower ahora está en desuso.
  • No puedo usar nada en los paquetes npm, porque el proceso de compilación no proporciona esto.

Actuación

  • El tamaño de los archivos aumenta cada día, por lo que debe introducir una solución para dividir el código.
  • Ser capaz de dividir archivos y aplazar la carga hasta que sea necesario ahorra transferencias y análisis innecesarios.

División de código

  • Después del uso, la división del código del paquete web será más fácil de usar.
  • Divida las nuevas funciones en módulos.

Finalmente, usar los paquetes npm es un cambio de juego. El objetivo era facilitar la base de código para otros desarrolladores. Además, demostramos que es posible actualizar su sistema sabiamente incluso si su código base es terrible.

Reescribir toda la aplicación es un desastre, porque potencialmente está desperdiciando años de arduo trabajo. En su lugar, intente hacer que su base de código sea más legible, mantenible y modular. Cuando el código antiguo necesita refactorización, puede hacerlo paso a paso.

No te quedes atascado con tu antigua base de código y digas que no puedes hacerle nada. Intente realizar cambios usted mismo: viva con cosas nuevas, nuevas actualizaciones y nuevas tecnologías que lo harán feliz.

¡Esta es la primera vez que escribo para personas! Si te gustó este artículo, compártelo con otras personas a tu alrededor.

Estoy escribiendo en blog.yaabed.com. Si disfrutaste este artículo, asegúrate de compartirlo con otras personas. Y no olvides presionar el botón de seguir para ver más artículos como este, también sígueme en Twitter.

Hola, mi nombre es Yazan Aabed. Crecido en Palestina. Mi especialidad fue en informática. Soy un ingeniero frontend y amante de JavaScript . Principalmente trabajando con marcos Frontend como (AngularJs, ReactJS). Puedes llamarme #Geek . Además, me gusta compartir mi conocimiento con otras personas y aprender de ellas 🌪. Puedes encontrarme en GitHub, Medium, Twitter.