Estoy trabajando en la aplicación ng2 y uso @angular/cli para construirla. Como salida, emite varios archivos js como .inline.js , .vendor.js , etc.
La pregunta es: ¿cómo configurar angular-cli para emitir solo un archivo como resultado, es decir, agrupar vendor.js , inline.js , etc. en un archivo grande?
Entiendo que podría hacerse usando un paquete adicional, pero sería bueno lograrlo a través de ng-cli
PD: no uso la carga diferida en esta aplicación y definitivamente no lo haré.
PPS Simplemente concatenar archivos después no es una opción porque:
Por ahora, parece que pasar a un paquete web puro sería la mejor y más fácil opción
ACTUALIZAR
existe la posibilidad de evitar la configuración de vendor.js --vendor-chunk en true , pero como resultado aún obtengo varios archivos: inline.bundle.js main.bundle.js polyfills.bundle.js
Angular CLI de forma nativa no es compatible con esto.
Hay otras soluciones, incluido el procesamiento adicional con otras herramientas después de que Angular CLI termine de hacer su trabajo, pero esto obstaculizará o eliminará las capacidades de depuración que Angular proporciona de forma inmediata.
Como el comando ng eject también está en desuso, la opción de reconfigurar webpack no es tan atractiva como solía ser. Sin embargo, eso sigue siendo técnicamente una posibilidad.
La mejor solución que he encontrado es el ngx-build-plus , que se puede encontrar en https://github.com/manfredsteyer/ngx-build-plus o agregar a un proyecto a través de ng add ngx-build-plus Angular -Comando CLI actualmente. Una vez instalado, proporciona opciones de configuración adicionales para compilar, incluido el --single-bundle true que se puede agregar a un comando ng build o ng serve .
Con esa bandera, se crean un archivo main.js y un archivo main.js.map, ya referenciados en el HTML, y simplemente se ejecutará correctamente de forma inmediata, con mapeo y depuración de código fuente completo.
1- use ng build --prod --output-hashing=none , que crea los archivos sin el cash-buster (el hash aleatorio).
2- Usa cat para agruparlos en un solo archivo
"build":"ng build --prod --output-hashing=none", "package":" cat dist/angular-project/{polyfills,runtime,main}.js > ./package.js", "bundle":"npm run build && npm run package"Y usarlo como:
npm run bundleNo he visto ninguna funcionalidad en angular-cli que se integre en un paquete, sin embargo, debería ser bastante fácil de hacer con un script de nodejs o usando una de las bibliotecas concat disponibles, como concat-files https://www.npmjs. com/paquete/archivos-concat
instale concat-files luego: agregue un archivo concat.js en su proyecto al mismo nivel que la carpeta dist
var concat = require('concat-files'); concat([ './dist/inline.bundle.js', './dist/vendor.bundle.js', './dist/vendor.bundle.js' ], './dist/app.js', function(err) { if (err) throw err console.log('done'); }); en su package.json en scripts , agregue una nueva build de script:
"scripts":{ "build": "ng build && node concat.js" } luego ejecútelo npm run build , ejecutará angular cli build primero y ejecutará el script concat.js que concatenará los paquetes resultantes