¿Por qué es necesario compilar el frontend?
Qué son los compiladores y por qué el frontend moderno no puede prescindir de ellos. Hablamos sobre los fundamentos de Webpack.
HTML admite dos formas de trabajar con JavaScript. La primera es agregar el código directamente en la página y la segunda es cargar el código desde un archivo especificado en la etiqueta <script>.
Scripts en línea
La primera forma:
<script>
document.getElementById('demo').innerHTML = 'Hello JavaScript!';
</script>
Esto solo funciona en situaciones muy simples. A veces se utiliza para agregar pequeños elementos interactivos, como autocompletar y conmutadores de pestañas.
Código en archivos
El frontend moderno ha avanzado mucho más allá de estas tareas. La cantidad de código JavaScript en muchos proyectos alcanza decenas o cientos de miles de líneas de código. Es físicamente imposible mantener tal cantidad de código dentro de HTML. Por lo tanto, se coloca en archivos separados, que pueden ser muchos. El segundo método se utiliza para su inclusión:
<!--
Cuando el navegador encuentra una etiqueta `<script>` con una ruta `src`,
carga el archivo especificado y lo ejecuta.
De esta manera, el código tiene acceso al contenido de la página.
-->
<!-- Todas las definiciones dentro se vuelven globales y están disponibles para todos los demás scripts -->
<script src="/assets/script1.js"></script>
<script src="/assets/script2.js"></script>
La etiqueta <script> se agregó a HTML hace mucho tiempo, mucho antes de que apareciera la versión moderna del lenguaje con módulos. En aquellos tiempos no existía Node.js, un administrador de paquetes y el concepto de "dependencias". Todo el código se escribía en un solo archivo. Incluso si había varios archivos, no estaban relacionados entre sí. Si intentas usar módulos junto con la etiqueta <script> normal, el navegador mostrará un error:
Uncaught SyntaxError: Cannot use import statement outside a module
En teoría, se puede escribir código sin utilizar un sistema de módulos, pero este enfoque es extremadamente laborioso y se basa en que todas las definiciones en el código son globales (lo que significa que se puede romper fácilmente sobrescribiendo definiciones existentes). Tendrías que especificar manualmente todos los archivos existentes y cargarlos en HTML en un orden estrictamente definido. Esto solo se encuentra actualmente en sitios web donde el frontend es jquery con un pequeño número de elementos interactivos.
La falta de módulos hace que el desarrollo normal sea imposible. No se pueden manejar las dependencias, no se pueden escribir pruebas, no hay análisis estático de código (no se pueden navegar por las definiciones, no hay sugerencias).
La falta de módulos hace que el desarrollo normal sea imposible. No se pueden manejar las dependencias, no se pueden escribir pruebas, no hay análisis estático de código (no se pueden navegar por las definiciones, no hay sugerencias).
Módulos en el navegador
El problema de la falta de módulos en el navegador es tan importante que en HTML5 se introdujo el soporte para módulos de JavaScript. Simplemente agregue type="module" a la etiqueta <script> y el navegador comenzará a entenderlos y cargarlos. Los módulos son compatibles con casi todos los navegadores modernos.
En HTML:
En HTML:
<script type="module" src="/assets/index.js"></script>
En JavaScript:
// index.js
import app from './app.js';
app();
// app.js
export default () => {
console.log('Hello from module!');
};
Los módulos en el navegador cambian completamente la forma de trabajar con JavaScript, como si no hubiera un "pero" importante. El sistema de módulos en el navegador no puede manejar dependencias. Si decidimos instalar, por ejemplo, lodash, el intento de importarlo dará como resultado un error. No se puede resolver este problema a nivel de los navegadores. El navegador no sabe nada sobre el sistema de archivos y lo que está sucediendo allí.
Uncaught TypeError: Failed to resolve module specifier "lodash".
Relative references must start with either "/", "./", or "../".
Compiladores de frontend
Estos problemas se resuelven por completo con los sistemas de compilación. Además de cargar archivos, resuelven muchas otras tareas igualmente importantes. El desarrollo frontend se basa en una variedad de preprocesadores y postprocesadores. Por ejemplo, para JavaScript moderno (y TypeScript) y muchos frameworks, se necesita Babel, que toma el código fuente del proyecto, lo transforma en un código comprensible para el navegador. Solo después de eso se puede entregar al cliente.:
# Especificamos el directorio de origen src
# Y el directorio donde colocar el código compilado
babel src -o dist
Lo mismo ocurre con CSS. Cada vez más desarrolladores utilizan SASS, que debe ser compilado a CSS puro.
# Especificamos el directorio de origen stylesheets
# Y el directorio donde colocar el CSS compilado
sass --update stylesheets dist/stylesheets
Además de estas tareas, los compiladores se encargan de lo siguiente:
- Proporcionan un comando único para compilar completamente el frontend, incluidas todas sus partes.
- Vuelven a compilar automáticamente el frontend durante el desarrollo. Lo hacen muy rápido gracias al uso de compilación incremental (compilan solo lo que ha cambiado).
- Garantizan el rendimiento. Minifican y comprimen el código (incluido el código no utilizado). Lo dividen de la manera más conveniente para el almacenamiento en caché.
- Realizan cualquier transformación, por ejemplo, TypeScript => JavaScript. Permiten agregar preprocesadores y postprocesadores, configurar el orden en que se aplican a los archivos seleccionados.
Si realizas estas tareas manualmente, la preparación del código para su ejecución en el navegador llevará más tiempo que el propio desarrollo.
Webpack
Uno de los primeros compiladores de frontend fue Webpack. Ahora es el estándar de facto en el entorno frontend, aunque existen otras soluciones. El principio general de funcionamiento de Webpack es el siguiente. Se instala Webpack en el proyecto y se describe su configuración. Esta configuración contiene todas las reglas de compilación: qué archivos tomar, qué manipuladores aplicar a ellos y dónde colocar el resultado. Como resultado, Webpack genera un archivo o conjunto de archivos listos para cargar en el navegador. A partir de ahí, no participa, el uso de estos archivos es responsabilidad del programador.
Webpack se suministra como una biblioteca npm y se instala en el proyecto, generalmente como una dependencia de desarrollo, y para trabajar es conveniente utilizar la utilidad de línea de comandos:
Webpack se suministra como una biblioteca npm y se instala en el proyecto, generalmente como una dependencia de desarrollo, y para trabajar es conveniente utilizar la utilidad de línea de comandos:
mkdir webpack-demo
cd webpack-demo
npm init -y
npm i -D webpack webpack-cli
Ahora puedes inicializar un nuevo proyecto de Webpack, que creará automáticamente todos los archivos y la configuración necesarios con un solo comando:
npx webpack init --force
Esto sobrescribirá el package.json, agregará algunas dependencias al proyecto, creará archivos HTML y JS, y también creará un archivo de configuración. Ejecutar el mismo comando sin la bandera --force abrirá un modo interactivo donde se pueden ajustar más finamente las opciones de la aplicación futura.
npx webpack init
? Which of the following JS solutions do you want to use? ES6
? Do you want to use webpack-dev-server? Yes
? Do you want to simplify the creation of HTML files for your bundle? Yes
? Do you want to add PWA support? No
? Which of the following CSS solutions do you want to use? none
? Do you like to install prettier to format generated configuration? No
? Pick a package manager: npm
[webpack-cli] ℹ INFO Initialising project...
conflict package.json
? Overwrite package.json? overwrite
force package.json
create src/index.js
create README.md
create index.html
create webpack.config.js
create .babelrc
# salida sobre la instalación de bibliotecas
[webpack-cli] ⚠ Generated configuration may not be properly formatted as prettier is not installed.
[webpack-cli] Project has been initialised with webpack!
El proyecto está listo y ahora se puede ejecutar:
npx webpack serve
Este comando compilará la aplicación en modo de desarrollo, abrirá el navegador y mostrará el contenido del archivo HTML, y se mostrará un mensaje desde src/index.js en la consola.
El archivo de configuración webpack.config.js contendrá varios complementos necesarios para trabajar con HTML. ¡Todo está listo para escribir tu primera aplicación frontend utilizando Webpack!
La mejor manera de continuar trabajando con él es leer la documentación oficial y estudiar el Boilerplate de Webpack.
La mejor manera de continuar trabajando con él es leer la documentación oficial y estudiar el Boilerplate de Webpack.
Leer otros artículos de Guías
Lea otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.