Angular 2 Modul Laden und Importieren [geschlossen] - eckig, Systemjs

Ich habe eine App Angular 2 mit Quickstart von angular.io gemacht und ich verwende SystemJs zum Laden von Modulen (siehe Schnellstartanleitung) und ich habe folgende Fragen:

1. import { Component} from "@angular/core"; Was macht diese Aussage? Wird der @ angular / core geladen oder lädt er nur Component from @ angular / core? Wie wird @ angular / core hier geladen, da ich kein Script-Tag eingebaut habe, das in irgendeiner Weise angular lädt?
2. Was nützt SystemJs in Angular 2?
3. Wie übersetzt sich mein es6-Code zu es5?
4. Werden hier alle js-Dateien gebündelt? Oder wird jedes Winkelmodul durch Ajax geladen?

Antworten:

Sehen Sie sich das Javascript an, das vom Typoskript übertragen wird.

1. Importieren Sie {Component} von "@ angular / core";

Hat zwei Dinge: Wird in einen Request-Aufruf transpiliert, wenn Sie commonjs als Modulformat in Typoskript haben, z.

var core_1 = require("@angular/core");

core_1.Component({})

Zweitens teilt es dem Compiler mit, in @ angular / core nach den Klassen der Komponente zu suchen. Standardmäßig werden alle nicht relativen Pfade im Import in den Ordnern node_modules nachgeschlagen. Also würde es aussehen:

node_modules/@angular/core/index.d.ts für @ angular / core

2. SystemJs wird zur Laufzeit als Modullader verwendet. Der Browser sieht in der Produktion nur das transpilierte Javascript. Also muss es wissen, wo nach den Abhängigkeiten gesucht wird, dies ist in systemjs.config.js definiert.

Dort sind die Pakete für @ angular / core definiertstandardmäßig nach Knotenmodulen suchen. Hier können Sie auch definieren, dass die Abhängigkeiten von einem CDN geladen werden, und die Version in node_modules würde nur für die Kompilierung von Typescript in Javascript verwendet werden.

3. Typescript-Compiler führt die Konvertierung von ES6 zu ES5 durch. Siehe typescript config: tsconfig.json

4. SystemJs führt keine Bündelung durch, es kann tatsächlich Pakete laden. Die Bündelung Ihres Javascript muss in kontinuierlicher Integration erfolgen, z. durch Grunzen oder Schlucken.

1. Das tut nicht wirklich viel. Es macht nur Component in der aktuellen Datei bekannt und verweist auf wo Component ist erklärt.

1: aus dem Dateipfad @angular/core : Es importiert die Component-Klasse in die aktuelle Datei

2: System js ist ein Modul-Lader, lädt alle Javascript-Module mehr von ihnen zu bündeln

Wenn Sie die Abhängigkeiten von angular2 in überprüft haben package.json Datei Sie werden das finden @angular/core Pfad als Abhängigkeit. Innerhalb von @ angular / core ist die Component-Klasse definiert:

Die Aussage import {Component} from @angular/core sagt: Folge dem Weg nach @angular/core und mach das Component Klasse für die aktuelle Datei verfügbar