javascript - change - page title angular 4
¿Cómo combinar(minimizar) componentes compilados Angular 2? (4)
** Cree un solo archivo desde TS con opciones en tsconfig.json.
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false,
"outDir":"client/build/",
"outFile": "client/build/all.js",
"declaration": true
},
"exclude": [
"node_modules",
"server"
],
"include": [
"client/*.ts",
"client/**/*.ts",
"client/**/**/*.ts"
]
}
// Include all folders to put to a file.
** Construye el archivo de salida e incluye lo siguiente: Ejemplo:
<script>
// Alternative way is compile in all.js and use the following system config with all the modules added to the bundles.
// the bundle at build/all.js contains these modules
System.config({
bundles: {
''client/build/all.js'': [''boot'',''components/all/present'',''components/main/main'',''components/register/register'',''components/login/login'',''components/home/home'',''services/userdetails'',''services/httpprovider'']
}
});
// when we load ''app/app'' the bundle extension interrupts the loading process
// and ensures that boot of build/all.js is loaded first
System.import(''boot'');
</script>
** Minimice el archivo all.js como lo hace normalmente.
Tratando de minimizar el código fuente compilado de un proyecto para producción, estoy usando Gulp como el ejecutor de tareas.
Los archivos de origen se ven así,
html
<!--... . . various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: ''register'',
defaultExtension: ''js''
}
}
});
System.import(''app/main'')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
La estructura de mi directorio de aplicaciones es la siguiente,
.
├── main.js
├── main.js.map
├── main.ts
├── main.app.js
├── main.app.js.map
├── main.app.ts
├── x.component1
│ ├── x.component.one.js
│ ├── x.component.one.js.map
│ └── x.component.one.ts
└── x.component2
├── x.component.two.js
├── x.component.two.js.map
└── x.component.two.ts
app / main.ts
import {bootstrap} from ''angular2/platform/browser'';
import {MyAwesomeApp} from ''./main.app''
bootstrap(MyAwesomeApp);
main.app.ts
@Component({
selector: ''app'',
template: `
<component-1></component-1>
<component-2></component-2>
`,
directives: [Component1, Component2]
})
export class MyAwesomeApp {
}
luego los componentes,
@Component({
selector: ''component-1'',
template: `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
`
})
export class Component1 {
}
y
@Component({
selector: ''component-2'',
template: `
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae ducimus, saepe fugit illum fuga praesentium rem, similique deserunt tenetur laudantium et labore cupiditate veniam qui impedit, earum commodi quasi sequi.
`
})
export class Component2 {
}
Todos los archivos de TypeScript están compilados hasta JavaScript de ES5, y además deben reducirse a main.js
entonces mis preguntas son
- ¿Puedo ejecutar una tarea para recopilar todos los archivos
.jscompilados para minimizarlos en un solo archivo y hacer referencia a ellos comomainen la rama de producción? - ¿Esto rompe la importación del sistema del módulo {x} de ''y''?
- Si rompe el módulo del sistema de carga, ¿qué se puede hacer para concatenar archivos en una aplicación Angular 2?
mi versión de TypeScript es, 1.8.2
Gracias por cualquier ayuda.
Como ya está utilizando Gulp, puede simplemente agregar el webpack en su tarea webpack para combinar todos sus archivos de código fuente JavaScript (así como las fuentes Angular2) en uno solo. Aquí hay una muestra de cómo podría verse su webpack.config.js :
module.exports = {
entry: ''./src/app/app'',
output: {
path: __dirname + ''/src'', publicPath: ''src/'', filename: ''bundle.js''
},
resolve: {
extensions: ['''', ''.js'', ''.ts'']
},
module: {
loaders: [{
test: //.ts/, loaders: [''ts-loader''], exclude: /node_modules/
}]
}
};
Las secciones relevantes de su gulpfile.js son
var webpack = require(''webpack-stream'');
var htmlReplace = require(''gulp-html-replace'');
var gulp = require(''gulp'');
gulp.task(''webpack'', function() {
return gulp.src(''src/app/*.ts'')
.pipe(webpack(require(''./webpack.config.js'')))
.pipe(gulp.dest(''src/''));
});
Reemplace gulp.dest(''src/'') con la ubicación relevante en la que desea que resida su código de producción.
A continuación, deberá procesar sus archivos HTML para tener las referencias de archivo de origen de JavaScript adecuadas (también en gulpfile.js ).
gulp.task(''html'', [''templates''], function() {
return gulp.src(''src/index.html'')
.pipe(htmlReplace({
''js'': [''bundle.js'']
}))
.pipe(gulp.dest(''dist/''));
});
Si desea minimizar sus archivos JavaScript, puede utilizar UglifyJS2 . (Sin embargo, tenga en cuenta que hay algo que va mal con la ofuscación, de ahí el mangle: false . Vea este enlace SO para más información). Aquí está el contenido gulpfile.js relevante:
gulp.task(''js'', [''webpack''], function() {
return gulp.src(''src/bundle.js'')
.pipe(uglify({
mangle: false
}))
.pipe(gulp.dest(''dist/''));
});
De esta manera, su código de producción termina en su carpeta dist desde donde puede implementarlo. Ahora es su elección si lo comprueba en una rama de producción o no.
Siéntase libre de consultar mi proyecto de palabras en Github si desea ver una versión funcional en una aplicación Angular2 muy pequeña.
Si desea compilar todos sus archivos de TypeScript en uno solo, necesita usar la propiedad outFile del compilador de TypeScript. Es configurable a través del complemento gulp-typescript.
De esta manera, no necesita configurar SystemJS para cargar el módulo en función de los nombres de archivo:
<script>
// Not necessary anymore
/* System.config({
packages: {
app: {
format: ''register'',
defaultExtension: ''js''
}
}
}); */
System.import(''app/main'')
.then(null, console.error.bind(console));
</script>
Los nombres de los módulos y sus contenidos ahora están presentes en este archivo único. De la misma manera para los archivos de paquetes empaquetados de la distribución angular2.dev.js ( angular2.dev.js , http.dev.js , ...). Para usar este archivo, simplemente inclúyalo en un elemento de script .
De esta manera no romperás las importaciones de módulos.
Luego puedes minimizar este único archivo con el plugin uglify de gulp ...
Si está utilizando @angular/cli puede ejecutar
ng build --prod
Para minimizar y gzip el código.