Quelle est la nécessité de SystemJS dans Angular2?

Question

Je suis un débutant complet au niveau des angles et Angular2. Je suis confus au sujet de la façon dont le flux de travail est structuré. J'ai été à la recherche à l' exemple de projet qui est présent dans le Angular2 site.

Corrigez-moi si je me trompe, mais ce que je sais jusqu'à maintenant, c'est que tout le tapuscrit est transpiled en javascript par le tapuscrit du compilateur. Ensuite compilé en javascript est effectivement ce qui s'exécute dans le navigateur.

Maintenant, si je suis d'importer les fichiers javascript en caractères d'imprimerie à l'aide de ES6 déclarations d'importation comme le suivant:

import { NgModule }      from '@angular/core';

Pourquoi ai-je encore besoin d'utiliser SystemJS pour charger eux -:

map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',

Je veux dire n'est-ce pas contre-productif ? En regardant les transpiled javascript des fichiers ts, il montre toutes les déclarations d'importation sont convertis en require() consolidés. Tout d'abord comment utiliser require() pour travailler dans un ES5 fichier js, et la deuxième si c'est le cas, qu'est-ce que SystemJS faire.

- Ce vraiment de me confondre. Toute aide sera grandement appréciée.

Answer 1

Lors de l' tsc compile tapuscrit en JavaScript, vous vous retrouvez avec un tas de js fichiers sur votre système local. Ils ont un peu besoin d'être chargé dans un navigateur. Depuis que les navigateurs ne prennent pas en charge native ES6 module de chargement encore, vous avez deux options, soit de les mettre tous dans votre index.html le fichier dans le bon ordre des dépendances, ou vous pouvez utiliser un chargeur pour le faire pour vous. Spécifier la racine pour tous les modules, et ensuite tous les fichiers sont chargés et exécutés par le loader dans l'ordre correct de dépendances. Il y a beaucoup de chargeurs: requirejs, webpack, systemjs et les autres. Dans votre cas particulier, il est systemjs.

En regardant les transpiled javascript des fichiers ts, il montre tous les déclarations d'importation sont convertis en require() consolidés.

Oui, c'est une façon pour SystemJs à la charge de faisceaux. Il utilise require() et exports de la syntaxe, parce que c'est l' CommonJS de la syntaxe pour le chargement des faisceaux et que vous avez spécifié ce type dans votre tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",

Si vous avez été de mettre module:'es6', vous verrez que dans votre compilé les fichiers javascript à l'importation et à l'exportation des états sont conservés. Cependant, comme mentionné précédemment, vous ne pouvez toujours pas utiliser cette syntaxe que les navigateurs ne le supportent pas nativement. Si vous avez été de mettre module:'amd', vous voyez une autre syntaxe qui utilise define(). Je suppose que le systemjs chargeur est préféré en angular2 starter tutoriel car il peut effectivement charger tous les types de modules pris en charge par tsc. Cependant, si vous souhaitez charger des modules es6 modules, vous devez mettre de l' module: 'system' votre tsconfig.json. C'est un système modulaire conçu pour respecter es6 modules standard et utilisé jusqu'à il y a un support complet de l' es6 modules dans les navigateurs.

Comment le programme d'installation fonctionne

Dans votre index.html vous ajoutez le script suivant:

<script>
    System.import('app').catch(function (err) {
        console.error(err);
    });
</script>

qui est exécutée lorsque l' index.html est chargé. L' import('app') méthode instruit systemjs à la charge app module qui correspond app le dossier dans votre répertoire de projet de la structure, comme spécifié par la configuration en systemjs.config.js:

map: {
    // our app is within the app folder
    app: 'app',

SystemJs recherche main.js le fichier dans ce dossier. Lors de l' app/main.js est trouvé et chargé dans un navigateur, de l'intérieur, c'est le code de l'appel d' require se trouve:

var app_module_1 = require('./app.module');

et systemjs extrait app.module.js le fichier à partir du système local. Dans son tour, a sa propre dependcies, comme:

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

Et le cycle se répète - charge, recherche pour dependencie, de les charger et de les exécuter. Et c'est la façon dont tous avec des dépendances sont résolues, est chargé et exécuté dans un navigateur par l' systemjs.

Pourquoi les mappages core @angulaire bibliothèques sont nécessaires

Dans l' systemjs.config.ts le fichier il y a la cartographie de la base @angular modules:

map: {
  ...
  // angular bundles
  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/common': 'npm:@angular/common/bundles/common.umd.js',

La première chose à comprendre ici est que ce sont des mappages, pas de dépendances. Cela signifie que si aucun de vos fichiers importer @angular/core, il ne sera pas chargé d'un navigateur. Cependant, vous pouvez voir que ce module est importé à l'intérieur d' app/app.module.ts:

import { NgModule }      from '@angular/core';

Maintenant, pourquoi les mappages sont là. Supposons systemjs votre chargé app/app.module.js dans le navigateur. Il analyse son contenu et trouve la suivante:

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

Maintenant, systemjs comprend qu'il doit résoudre et de la charge @angular/core. Il va d'abord à travers le processus de vérification de l' mappings, comme indiqué dans les docs:

La carte option est similaire à l'chemins, mais des actes très tôt dans l' processus de normalisation. Il vous permet d'associer un alias de module à un emplacement du ou des colis.

Je dirais que c'est une résolution par un nom de module. Donc, il trouve de la cartographie et de substituts @angular/core avec node_modules/@angular/core , et c'est là le réel, les fichiers sont placés.

Je pense que systemjs tente d'imiter l'approche utilisée en node.js où vous pouvez spécifier un module sans le chemin d'accès relatif identificateurs ['/', '../', or './'], tout simplement, comme c' require('bar.js') et node.js:

alors Node.js commence au répertoire parent du module en cours, et ajoute /node_modules, et tente de charger le module à partir de ce emplacement.

Si vous le vouliez, vous pourriez éviter d'utiliser nommé le mappage et les importer à l'aide de chemin d'accès relatif, comme ceci:

import {NgModule} from '../node_modules/@angular/core';

Toutefois, cela devrait être fait dans toutes les références à @angular.core dans le projet et les fichiers lib, y compris @angular, ce qui n'est pas une bonne solution pour dire le moins.