Twórz Angular2 HTML i TypeScript do jednego pliku

Question

Przygotowuję aplikację (w dużej skali) przy użyciu Angular2 i TypeScript. Będzie musiała zostać podzielona na wiele projektów, a każdy projekt będzie miał wiele komponentów, każdy z nich, z tablicą stylów .html, i .css i logiką/klasą .

Chciałbym, aby każdy projekt skompilował się do pojedynczego pliku *.js i został skopiowany na stronę hosta, która będzie działała w IIS. Byłoby to podobne do tego, jak tworzona jest aplikacja WPF lub Silverlight z plikami .xaml, które wszystkie są kompilowane do .dll.

Rozejrzałem się po Internecie i mogę pobrać pliki .ts do jednego pliku .js przy użyciu opcji --outFile. Ale to nie pomaga mi z plikami .html lub css.

Każda pomoc będzie bardzo mile widziane, nawet jeśli jest to znaczy, że co pytam jest niemożliwe :-)

Stephen

Answer 1

Jeśli używasz domyślnego Angular2 tsconfig.json z SystemJS loader:

Możesz zostawić całą ciężką pracę na SystemJS Build Tool. Jest to na przykład, jak to zrobić w moich projektów za pomocą gulp:

1. kompilacji * .ts i wbudowane szablony * .html

   Używam gulp-angular-embed-templates razu do inline wszystko templateUrl do template ciągi (ta wtyczka działa zarówno z Angular 1. *, jak i Angular 2).

   var tsc = require('gulp-typescript'); 
   var tsProject = tsc.createProject('tsconfig.json'); 
   var embedTemplates = require('gulp-angular-embed-templates'); 
   
   gulp.task('app.build', function() { 
       var tsResult = gulp.src('app/src/**/*.ts', {base: './app/src'}) 
        .pipe(embedTemplates()) // inline templates 
        .pipe(tsc(tsProject)); 
   
       return tsResult.js 
        .pipe(gulp.dest('build/js')); 
   }); 
   

   To będzie generować wiele anonymous System.register modules w build/js katalog. Wszystkie z nich będą już oznaczone jako templateUrl.

2. Bundle wszystko w jednym .js pliku

   używam SystemJS Build Tool do tego, ponieważ myślę, że to sposób łatwiejsze niż przy użyciu na przykład WebPack. Tak, mam inne zadanie haustem do tego, aby zautomatyzować proces:

   var SystemBuilder = require('systemjs-builder'); 
   
   gulp.task('app.systemjs.bundle', function() { 
       var builder = new SystemBuilder('build/js, { 
        paths: { 
         '*': '*.js' 
        }, 
        meta: { 
         'angular2/*': { 
          build: false 
         }, 
         'rxjs/*': { 
          build: false 
         } 
        } 
       }); 
   
       return builder.bundle('main', 'build/js/app.bundle.js'); 
   }); 
   

   Budowniczy wykonuje te same opcje jak SystemJS więc sprawdzić ich Config API.

   Wywołanie builder.bundle('main', ...) wyszukuje main.js (który jest moje pierwsze skrypt z kątowym za bootstrap rozmowy. Jest to ten sam plik można zobaczyć in the 5 min quickstart) bo dołączyć .js do wszystkich ścieżek poszukiwanych przez producenta. To dlatego, że podczas importowania moduł w TS zwykle zadzwonić:

   import {ModalResultComponent} from './modal-result.component'; 
   

   który jest kompilowany jako ./modal-result.component uzależnienia i nie dbają o rozszerzenie pliku.Właśnie dlatego musiałem dodać *.js do wszystkich ścieżek, aby pomóc konstruktorowi znaleźć wszystkie skompilowane pliki JavaScript.

   Opcje meta po prostu mówią budowniczemu, aby ignorował zależności, których nie chcę pakować. To jest sama Angular2 i biblioteka rxjs, ponieważ obejmują import 'rxjs/add/operator/map' w main.ts.

   Generuje pojedynczy plik app.bundle.js ze wszystkimi modułami zarejestrowanymi jako nazwane moduły przy użyciu System.register.

3. Korzystanie z naszych app.bundle.js

   ostatnia część jest bułka z masłem. Po prostu zaimportujemy domyślny materiał Angular2, a następnie użyjemy bundle option, aby poinformować SystemJS, gdzie znajdują się wszystkie nasze zależności.

   <script> 
   System.config({ 
       packages: { 
        '/web': { 
         format: 'register', 
         defaultExtension: 'js' 
        } 
       }, 
       bundles: { 
        '/web/app.bundle': ['main'] 
       } 
   }); 
   System.import('main').then(null, console.error.bind(console)); 
   </script> 
   

   Kiedy wzywamy System.import('main') go w rzeczywistości pierwszych pobrań /web/app.bundle.js i rejestruje wszystkie moduły w pakiecie, a potem importuje moduły main z naszej bootstrap Angular2.

   I to wszystko!

rzeczywiście nie trzeba używać gulp na wszystko i zrobić wszystko z czystej node skryptu.

Łączenie plików CSS jest łatwe z takimi funkcjami jak cssnano i jestem pewien, że możesz znaleźć samouczki, jak z niego korzystać wszędzie.

Jestem pewien, że istnieją inne sposoby na to samo. Angular2 został zaprojektowany, aby nie ograniczać cię do korzystania tylko z jednej technologii. Jednak korzystanie z SystemJS wydaje mi się najprostszym sposobem, ponieważ domyślnie używa tego samego systemu modułów, co Angular2.

Jestem pewny, że można również użyć na przykład formatu commonjs, ale wymagałoby to również użycia polyfill dla programu ładującego require(), ale jeszcze go nie wypróbowałem. Wierzę, że UMD może być również warte wypróbowania.