La clave para entender en este nivel es que usando la siguiente configuración, no puede concatizar archivos JS compilados directamente.
En la configuración del compilador de TypeScript:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": false,
"stripInternal": true,
"module": "system",
"moduleResolution": "node",
"noEmitOnError": false,
"rootDir": ".",
"inlineSourceMap": true,
"inlineSources": true,
"target": "es5"
},
"exclude": [
"node_modules"
]
}
En el HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
De hecho, estos archivos JS contendrán módulos anónimos. Un módulo anónimo es un archivo JS que usa System.registerpero sin el nombre del módulo como primer parámetro. Esto es lo que genera el compilador mecanografiado de forma predeterminada cuando systemjs está configurado como administrador de módulos.
Entonces, para tener todos sus módulos en un solo archivo JS, debe aprovechar la outFilepropiedad dentro de la configuración del compilador de TypeScript.
Puede usar el siguiente trago interno para hacer eso:
const gulp = require('gulp');
const ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
gulp.task('tscompile', function () {
var tsResult = gulp.src('./app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('./dist'));
});
Esto podría combinarse con algún otro procesamiento:
- para uglify los archivos compilados de TypeScript
- para crear un
app.jsarchivo
- para crear un
vendor.jsarchivo para bibliotecas de terceros
- para crear un
boot.jsarchivo para importar el módulo que arranca la aplicación. Este archivo debe incluirse al final de la página (cuando toda la página está cargada).
- para actualizar el
index.htmltener en cuenta estos dos archivos
Las siguientes dependencias se utilizan en las tareas de gulp:
- gulp-concat
- gulp-html-replace
- gulp-mecanografiado
- tragar-uglificar
La siguiente es una muestra para que se pueda adaptar.
Crear app.min.jsarchivo
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Crear vendors.min.jsarchivo
gulp.task('vendor-bundle', function() {
gulp.src([
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/http.dev.js'
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Crear boot.min.jsarchivo
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
El config.prod.jssimplemente contiene lo siguiente:
System.import('boot')
.then(null, console.error.bind(console));
Actualizar el index.htmlarchivo
gulp.task('html', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js',
'boot': 'boot.min.js'
}))
.pipe(gulp.dest('dist'));
});
El index.htmlaspecto es el siguiente:
<html>
<head>
<!-- Some CSS -->
<!-- build:vendor -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- endbuild -->
<!-- build:app -->
<script src="config.js"></script>
<!-- endbuild -->
</head>
<body>
<my-app>Loading...</my-app>
<!-- build:boot -->
<!-- endbuild -->
</body>
</html>
Tenga en cuenta que System.import('boot');debe hacerse al final del cuerpo para esperar a que todos los componentes de su aplicación se registren desde el app.min.jsarchivo.
No describo aquí la forma de manejar la minificación de CSS y HTML.