typescript - ¿Cómo preparar la versión de lanzamiento con SystemJS y Gulp?

angular

Question

Uso SystemJS en mi proyecto Angular2. Yo uso el archivo tsconfig para TypeScript. Quiero usar gulp para concat y minify mi código para la versión de producción. Tengo problemas con la concatenación del código: cada vez que trato de concatenar archivos, me sale ''angular'' no definido o ''sistema'' no definido. Traté de modificar el orden en que intento cargar mis archivos desde los módulos de nodo, sin embargo, no lo logré.

Me preguntaba si alguno de ustedes tenía este problema y encontré una respuesta.

Aquí está mi archivo gulp:

var gulp = require(''gulp''),
            .....


var paths = {
    dist: ''dist'',
    vendor: {
        js: [
            ''node_modules/systemjs/dist/system.src.js'',
            ''node_modules/angular2/bundles/angular2.dev.js'',
            ''node_modules/angular2/bundles/angular2-polyfills.js'',
            ''node_modules/angular2/bundles/router.dev.js''
             ...
        ],
        css: []
},
    app: {
        templates: [
            ''app/**/*.html'',
            ''!node_modules/*.html''
        ],
        scripts: [
            ''app/**/*.ts'',
            ''app/config.ts'',
            ''app/app.ts''
        ]
    }
};

var tsProject = ts.createProject(''tsconfig.json'', {
    out: ''Whatever.js''
});

gulp.task(''dev:build:templates'', function () {
    return gulp.src(paths.app.templates)
        .pipe(ngHtml2Js({
            moduleName: ''Whatever'',
            declareModule: false
        }))
        .pipe(concat("Whatever.tpls.min.js"))
        .pipe(gulp.dest(paths.dist));
});
gulp.task(''prod:build:templates'', function () {
    return gulp.src(paths.app.templates)
        .pipe(minifyHtml({
            empty: true,
            spare: true,
            quotes: true
        }))
        .pipe(ngHtml2Js({
            moduleName: ''whatever'',
            declareModule: false
        }))
        .pipe(concat(paths.appName + ".tpls.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest(paths.dist));
});

gulp.task(''dev:build:scripts'', function () {
    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(ts(tsProject));

    return tsResult.js
        .pipe(sourcemaps.write({
            sourceRoot: ''/app''
        }))
        .pipe(concat(''whatever.js''))
        .pipe(gulp.dest(paths.dist));
});

gulp.task(''dev:build:styles'', function () {
    return gulp.src(paths.app.styles)
        .pipe(sass())
        .pipe(gulp.dest(paths.dist + ''/css''));
});
gulp.task(''dev:build:vendor'', function () {
    return gulp.src(paths.vendor.js)
        .pipe(concat(''vendor.min.js''))
        .pipe(gulp.dest(paths.dist))
});

gulp.task(''dev:build'', [
    ''dev:build:vendor'',
    ''dev:build:templates'',
    ''dev:build:scripts'',
    ''dev:build:styles'',
], function () {
});

Así es como cargo mis archivos:

   <script src="vendor.min.js"></script>
   <script src="Whatever.js"></script>
   <script src="Whatever.tpls.min.js"></script>

Y aquí están los errores que estoy obteniendo:

Uncaught TypeError: Unexpected anonymous System.register call.(anonymous function) @ vendor.min.js:2680load.metadata.format @ vendor.min.js:3220oldModule @ vendor.min.js:3749(anonymous function) @ vendor.min.js:2411SystemJSLoader.register @ vendor.min.js:2636(anonymous function) @ Whatever.js:2
Whatever.tpls.min.js:1 Uncaught ReferenceError: angular is not defined

Answer 1

Creo que encontramos la causa raíz de esto. Honestamente, he estado allí antes, así que la forma en que rastrear este tipo de problema son

1. Verifique si angular y systemjs están cargados de antemano.
2. Verifica si están realmente cargados. ninguna sorpresa 404. (Suena estúpido, pero sucede una mierda)
3. Si agrupa las bibliotecas como vendedor.js, asegúrese de que estén agrupadas en la secuencia correcta. Verifique el archivo de salida y vea si son concat como se espera.

Answer 2

Obtendrá "Llamada de registro del sistema anónimo inesperado" porque las referencias no se están cargando en el orden correcto. Uso JSPM para construir correctamente mi aplicación angular para producción. Hay 4 partes en el proceso.

Parte 1: compila tus archivos de mecanografía

var ts = require("gulp-typescript");
var tsProject = ts.createProject("./App/tsconfig.json");
gulp.task("compile:ts", function () {
    var tsResult = tsProject.src()
        .pipe(ts(tsProject));
    tsResult.js.pipe(gulp.dest("./wwwroot/app"));

});

Parte 2: Configure config.js (para decirle a JSPM cómo agrupar su aplicación):

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  paths: {
    "npm:*": "jspm_packages/npm/*",
    "github:*": "jspm_packages/github/*",
    "node_modules*": "node_modules/*"
  },
  map: {
    ''app'': ''app'',
    ''rxjs'': ''node_modules/rxjs'',
    ''@angular'': ''node_modules/@angular''
  },
  packages: {
    ''app'': { main: ''bootDesktop.js'', defaultExtension: ''js'' },
    ''rxjs'': { defaultExtension: ''js'' },
    ''@angular/common'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/compiler'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/core'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/http'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/platform-browser'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/platform-browser-dynamic'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/router'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/router-deprecated'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/testing'': { main: ''index.js'', defaultExtension: ''js'' },
    ''@angular/upgrade'': { main: ''index.js'', defaultExtension: ''js'' }
  }


});

Parte 3: Use gulp-jspm-build para agrupar su aplicación (antes estaba usando gulp-jspm pero estaba causando errores, así que cambié a gulp-jspm-build):

var jspm = require(''gulp-jspm-build'');
gulp.task("jspm_bundle", function () {
return jspm({
    bundleOptions: {
        minify: true,
        mangle: false
    },
    bundleSfx: true,
    bundles: [
        { src: ''./wwwroot/app/appBoot.js'', dst: ''boot.bundle.min.js'' }
    ]
})
.pipe(gulp.dest(''./wwwroot/js-temp''));


});
//this will create a file called boot.bundle.min.js
//note I have set jspm to create a self-executing bundle
//I put mangle to false because mangling was causing errors 

4: Ahora concat todos sus activos ya minificados:

gulp.task("min:js", ["jspm_bundle"], function () {
    //this only concats boot.bundle.min.js
    //and dependencies.min.js which has already been minified such as es6-shim.js
    var files = [
        "./wwwroot/js-temp/dependencies.min.js",
        "./wwwroot/js-temp/boot.bundle.min.js"
    ];

    return gulp.src(files)
        .pipe(concat("boot.bundle.min.js"))
        .pipe(gulp.dest("./wwwroot/js"));

});

Finalmente, ponga una buena referencia de script ordenada en su index.html:

<script src="~/js/boot.bundle.min.js"> </script>

Una de las buenas características de este enfoque es que su aplicación incluida solo contendrá los activos a los que se hace referencia en sus declaraciones de importación (jspm no lo incluirá si no lo necesita).

ACTUALIZACIÓN: config.js revisado para ajustarse a una aplicación Angular 2.0-rc.0

ACTUALIZACIÓN 2: tsconfig.json se ve así:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "declaration": false,
    "noLib": false,
    "target": "es5",
    "outDir": "wwwroot/app/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Answer 3

Puede usar github.com/systemjs/builder

tan fácil como esto

var path = require("path");
var Builder = require(''systemjs-builder'');

// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder(''path/to/baseURL'', ''path/to/system/config-file.js'');

builder
.bundle(''local/module.js'', ''outfile.js'')
.then(function() {
  console.log(''Build complete'');
})
.catch(function(err) {
  console.log(''Build error'');
  console.log(err);
});

puedes ver la configuración completa en mi proyecto inicial