2016-09-06 14 views
10

Angular 2 rc 6 napisany w Typescript 2.0.2kątowa 2 Ahead-of-Time Compiler z łykiem-maszynopisu

Próbuję nauczyć Ahead-of-time kompilacji as outlined here. Wydaje się dość proste:

  • Run ngc zamiast kompilator Typescript wygenerować .ngfactory.ts plików
  • Wymień platformBrowserDynamic().bootstrapModule() z platformBrowser().bootstrapModuleFactory()

nie jestem pewien, jak zastosować pierwszy krok do mojej konfiguracji. Używam gulp-typescript 2.13.6 do kompilacji mojego maszynopisu do JavaScript.

gulpfile.js

var ts = require('gulp-typescript'); 
var tsProject = ts.createProject('tsconfig.json', { 
    //Use TS version installed by NPM instead of gulp-typescript's built-in 
    typescript: require('typescript') 
}); 
gulp.task('build-ts', function() { 
    return gulp.src(appDev + '**/*.ts') 
     .pipe(ts(tsProject)) 
     .pipe(gulp.dest(appProd)); 
}); 

Więc moje pytanie brzmi; jak mogę zintegrować instrukcje z moim oprzyrządowaniem? Jak uzyskać gulp-typescript, aby użyć kompilatora kątowego? Próbowałem:

var tsProject = ts.createProject('tsconfig.json', { 
    typescript: require('@angular/compiler') // or '@angular/compiler-cli' 
}); 

To powoduje błędy bez konieczności uruchamiania ngc. Próbowałem też

var tsProject = ts.createProject('tsconfig.json', { 
    typescript: require('./node_modules/.bin/ngc') 
}); 

ten ma wykonać ngc ale natychmiast wyrzuca błąd:

SyntaxError: Unexpected string at ngc:2: basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")

Podejrzewam, to dlatego, że nie katalog źródłowy jest przekazywana do ngc (wymagane polecenie jest ngc -p path/to/project)

Zasadniczo , czy istnieje sposób, aby użyć gulp-typescript do jednokrokowego procesu kompilacji? (Generowanie .ngfactory.ts pliki, a następnie skompilować wszystko JavaScript)

Odpowiedz

7

sobie wyobrazić powód dlaczego typescript: require(..) nie działa dlatego łyk-maszynopis wygląda na coś zwanego typescript lub próbuje uruchomić polecenie tsc, a ponieważ komenda kątowe kompilator ngc, nie można go znaleźć.

Teraz, jeśli projekt jest tak samo proste, jak kompilowanie go, można po prostu uruchomić polecenie z łykiem tak:

var exec = require('child_process').exec; 

gulp.task('task', function (cb) { 
    exec('ngc -p "<path to your tsconfig.json>"', function (err, stdout, stderr) { 
    console.log(stdout); 
    console.log(stderr); 
    cb(err); 
    }); 
}); 

Wymaga to, że masz tsconfig.json ustawione poprawnie, z potencjałem dodatkowe opcje, które Google mówi o here, pod nagłówkiem Konfiguracja.

Jeśli potrzebujesz bardziej złożonej funkcjonalności, jaką zapewnia pakiet gulp-maszynopis, obawiam się, że będziesz musiał sam ją rozwinąć lub poczekać na kogoś innego.

+0

Dzięki William. Dodaj jeszcze kilka szczegółów: Co to są 'cb' i' cb (err) '? Czy muszę zainstalować wtyczkę 'child_process'? Czy ścieżka zawiera nazwę 'tsconfig.json' lub jest po prostu ścieżką do katalogu? – BeetleJuice

+1

'cb' Wierzę, że oznacza callback, więc w tym fragmencie kodu' cb (err) 'po prostu przekazuje funkcję błędu do funkcji wywołania zwrotnego. Skorzystałem z tego fragmentu informacji [tutaj] (https://www.npmjs.com/package/gulp-exec). 'child_process' jest wbudowanym modułem gulp 4.0 i wyższych. Odnośnie ścieżki, jest to z [link Google] (https://github.com/angular/angular/tree/master/modules/@angular/compiler-cli) powyżej, "Akceptuje on flagę' -p ", która wskazuje na plik 'tsconfig.json' lub katalog zawierający jeden." więc, albo. –

3

Starałem się, aby to zadziałało, a William Gilmour's answer bardzo pomógł.

Wyciągnąłem go trochę do uruchomienia lokalnego ngc instalacji (jak kątowej 2 example który biegnie jeden w node_modules/.bin), a który działa zarówno na Linux i Windows systemów:

var exec = require('child_process').exec; 
var os = require('os'); 

gulp.task('build-ts', function (cb) { 

    var cmd = os.platform() === 'win32' ? 
     'node_modules\\.bin\\ngc' : './node_modules/.bin/ngc'; 

    exec(cmd, function (err, stdout, stderr) { 
     console.log(stdout); 
     console.log(stderr); 
     cb(err); 
    }); 
}); 
1

To jest krzyż -platform wersja gulpfile, które obecnie używam dla Ahead-of-time (AOT) kompilacji z kątowym 2:

//jshint node:true 
//jshint esversion: 6 
'use strict'; 

... 

// helper function for running ngc and tree shaking tasks 
const run_proc = (cmd, callBack, options) => { 
     process.stdout.write(stdout); 
     process.stdout.write(stderr); 
     callBack(err); 
    }); 
}; 


gulp.task('ngc', ['css', 'html', 'ts'], cb => { 
    let cmd = 'node_modules/.bin/ngc -p tsconfig-aot.json'; 
    if (isWin) { 
     cmd = '"node_modules/.bin/ngc" -p tsconfig-aot.json'; 
    } 
    return run_proc(cmd, cb); 
}); 

Zachęcamy do zapoznania się z całą przykład Tour of Heroes (ToH) przykład wi th gulp.js na moim repozytorium github: ng2-heroes-gulp

Jest to na pewno rozwiązanie krótkoterminowe, rozwiązaniem długoterminowym będzie dla mnie wtyczka gulp-ngc.