web pack para la construcción de un proyecto javascript
TRANSCRIPT
WebPack para la construcción de un proyecto
Javascript.Jorge Ulises Useche Cuellar
Aplicaciones de página única SPA
WebPack Empaquetador de módulos.● Empaquetamiento de módulos CommonJS / AMD para el navegador. ● Permite dividir su base de código en varios paquetes, los cuales pueden ser
cargados a la demanda-● Cargadores de apoyo a los archivos de procesamiento previo, es decir,
JSON, jade, coffee, css, menos, ... y cosas personalizadas.● Módulos: CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript,
LESS...
WebPack Empaquetador de módulos.● Formato de módulo:
○ AMD (Asynchronous Module Definition)
○ CommonJS
● División de código
● Optimizaciones
● Loaders (cargadores)
● Aún más!!!!!
Formato de módulo AMD● AMD: definir módulos cuyas dependencias son
cargadas asincrónicamente○ Mejorar el tiempo de carga de los sitios web
○ Cargar múltiples archivos JavaScripts en tiempo de ejecución
○ Puede usarse para organizar mejor el código
separándolo en archivos independientes que encapsulan su lógica.
○ Similar a import, package, y class.
Formato de módulo CommonJS● CommonJS es un proyecto con el objetivo de especificar un ecosistema
JavaScript fuera del navegador (por ejemplo, en el servidor o para aplicaciones de escritorio nativas)
● Inicialmente llamado ServerJS● Kevin Dangoor ingeniero de Mozilla (Enero 2009)● CommonJS no está afiliada con el grupo ECMA TC39 Internacional que
trabaja en ECMAScript, pero algunos miembros del TC39 participar en el proyecto
División de código● Se puede manejar una base de código modular
si no ha utilizado un sistema de módulos.● Estos módulos exportan una interfaz al objeto
global ex:“window”. Los módulos pueden acceder a la interfaz de dependencias sobre el objeto global.
○ Conflictos con el objeto global.○ Orden de carga es importante.
○ Los desarrolladores tienen que resolver las dependencias de los módulos/bibliotecas.
○ En grandes proyectos, la lista puede ser muy larga y difícil de manejar.
Optimizaciones● Minimización● Deduplicación
○ Esta técnica de respaldo elimina los datos
redundantes almacenados, guardando una única copia idéntica de los datos
● Trozos (chunks)○ Transferencia
● Single-Page-App● Multi-Page-App
○ Compartir código común entre páginas.
Loaders (cargadores)● webpack sólo puede procesar JavaScript de forma nativa, se usan
cargadores para transformar otros recursos en JavaScript. Al hacer esto, todos los recursos forman un módulo.
● Tipos○ Basic○ Packaging○ Dialects○ Templating○ Styling○ Translation○ Support
¿Aún más?...● Multiple targets● Development Tools● Plugins● Shimming modules● Long-term Caching● Testing● Build performance● webpack with grunt gulp bower karma
EstáticosActivos/BienesMódulos con
Dependencias
Eje
mpl
o 1
Eje
mpl
o 2
Eje
mpl
o 3
Objetivos de WebPack● Dividir el árbol de dependencias en trozos cargados a demanda.● Mantenga el tiempo de carga inicial baja.● Cada static asset debe ser capaz de ser un módulo.● Capacidad de integrar bibliotecas de terceros como módulos.● Posibilidad de personalizar casi todas las partes del “module bundler”.● Adecuado para grandes proyectos.
Justificación de WebPack● Los módulos existentes no son muy adecuados para grandes proyectos
(grandes aplicaciones de una sola página Single-Page Applications (SPAs)).
● La razón más apremiante para desarrollarlo era la División de Código y que los activos estáticos (assets, statics) encajaran perfectamente juntos a través de la modularización.
● Se intentó extender enfardadoras de módulos existentes, pero no fue posible lograr todos los objetivos. (autor)
Me convencí? Por dónde comienzo?● http://webpack.github.io/docs/tutorials/getting-started/