Aplicación Bundle Angular 2 usando paquetes UMD (no compilando paquetes de proveedores)
Actualmente estoy empaquetando mi aplicación Angular 2 con WebPack. Todavía estamos girando ciclos rápidos, por lo que en lugar de agregar retrasos a nuestro proceso de compilación y carga de aplicaciones, queremos incluir los paquetes preparados para Angular 2 UMD CDN, que rara vez cambian, por ejemplo:
<script src="https://npmcdn.com/@angular/[email protected]/bundles/core.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/common.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/[email protected]/bundles/compiler.umd.min.js"></script>
plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js") ], mi paquete de aplicaciones es pequeño, pero construyo manualmente un paquete separado de 1 MB que contiene la mayor parte del marco Angular 2, cada compilación. Este archivo cambia ligeramente cada compilación dependiendo de mi aplicación, y no es portátil entre versiones de mis aplicaciones o varias aplicaciones, y no tiene el beneficio de "CDN". Por supuesto, tengo que incluir este archivo para que se ejecute mi aplicación.Cuando uso el IgnorePlugin para filtrar@angular|rxjs, p.ej.plugins: [ new webpack.IgnorePlugin(/\@angular|rxjs/) ], excluye los archivos del proveedor, pero inserta excepciones codificadas / arroja errores en la parte superior de mi paquete de aplicaciones.Cuando usoWebPack externos, p.ej.externals: ['@angular/core', ..., Yo obtengofunction(module, exports) { module.exports = @angular/core; }, salida en mi paquete de aplicaciones, que obviamente no es funcional. La documentación de WebPack no es muy próxima, pero creo que puedo especificar unalibraryTarget o la función de resolución citada, que indicaría a WebPack que compile en la carga del módulo.Cuando abandono WebPack por completo y uso en su lugar el paquete del compilador TypeScript (segúnesta guia, que usa los paquetes UMD), obtengoSystem.register() llamadas que se refieren a los espacios de nombres NPM que esperaba, p.System.register("myapp/boot", ['@angular/core', ..., pero todavía estoy trabajando en la configuración de SystemJS para llamar a los UMD. Como nota al margen, este archivo tiene un tamaño adicional del 25% en relación con lo que está generando WebPack.Si uso SystemJS como en el elemento anterior, quiero que esta compilación se produzca durante la compilación, o como un proceso paralelo, en lugar de como parte del archivo guardado. supongoSystemJS-Builder (ver preguntas relacionadasaquí yaquí) sería la forma de hacer esto? Quizás esto también produciría tamaños de archivo más pequeños que el "paquete" integrado con ScriptScript.¿Cómo puedo crear un paquete de aplicaciones que no dependa de un paquete Angular 2 único y reempaquetado?
Actualmente estoy construyendo contra RC3. Mi proceso es actualmente WebPack, como se mencionó anteriormente, pero me mudaría a otro conjunto de herramientas si eso lo hace más fácil.
Investigando un poco más, creo que la terminología "Loader" de WebPack me ha engañado. Tengo que usar un cargador de módulos, y no parece que WebPack tenga uno que funcione para esto.
Para asignar espacios de nombres de módulo de paquetes UMD (y conectar dependientes) no se pueden cargar en etiquetas de script. En cambio, tienen que ser evaluados con un determinadothis contexto para actuar como la referencia del módulo. Eso significa que incluso si quiero que todos se carguen sincrónicamente, todavía tengo que configurar algo más como SystemJS para cargarlos a través del cable, por lo que su contexto se controla / ajusta.
EstaZapatero angular 2 está cerca de lo que estoy buscando. Utiliza los paquetes Angular 2 UMD, pero no usa un paquete RxJs, aunque eso parece bastante fácil de cambiar si quiero toda la biblioteca RxJs.