Qué hace systemjs.config.js hacer en angular 2 estructura de embalaje?

El systemjs.config.js define la configuración para Normalización de rutas en SystemJS. Carga algo usando SystemJS como este:

System.import('app/main.js')

Esto hace que SystemJS intente cargar su aplicación, comenzando con el archivo app/main.js. La primera cosa que SystemJS hace sin embargo es normalizar la ruta (app/main.js), lo que significa que traduce el camino de acuerdo con las reglas en systemjs.config.js.

Systemjs.config.js define diferentes tipos de alias, para cualquier cosa que esté siendo importada por SystemJS:

Mapa

La sección del mapa tiene dos usos:

Alias de ruta

En una aplicación donde SystemJS se está utilizando para cargar los módulos, la sección map se utiliza para alias una parte de la ruta, o para indicar a SystemJS dónde se encuentra realmente un módulo con nombre particular. Por ejemplo, puede estar cargando su aplicación usando SystemJS de esta manera:

System.import('app/main.js')

Ahora, di que en realidad, desea localizar los archivos de la aplicación en:

/assets/js/app.

Puede definir esto en la sección 'map' en systemjs.config.js:

// map tells the System loader where to look for things
map: {
  'app': '/assets/js/app'
}

SystemJS buscará su archivo principal en:

/assets/js/app/main.js

Identificar dónde ubicar los módulos

El principal propósito fundamental de SystemJS es proporcionar un sistema de módulos que satisfaga la falta de soporte universal de módulos ES en los navegadores, y una de las formas en que lo hace es usar la sección 'map' de systemjs.config.js para identificar dónde buscar módulos.

Para cualquier módulo que se esté importando dentro de su aplicación utilizando las instrucciones estándar ES 'import', la sección map identifica dónde los encontrará SystemJS (después de que su aplicación se haya cargado usando SystemJS). Este es un ejemplo común:

    // map tells the System loader where to look for things
    map: {
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',

Esto significa que cuando haces esto por primera vez en tu módulo raíz:

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

... SystemJS manejará la importación buscando la biblioteca Angular core en su ubicación predeterminada (asumiendo que está siendo instalado usando npm):

/node_modules/@angular/core/bundles/core.umd.js

Ahora, usted puede preguntarse cómo 'npm:' se traduce a '/node_modules', y eso es lo que la sección 'rutas' de systemjs.config.js hace:

Rutas

Esta sección define alias para partes de las rutas del módulo que se definen en 'map'. La forma en que 'npm' puede ser alias en el ejemplo anterior es así:

paths: {
  // paths serve as alias
  'npm:': '/node_modules/'
}

Lo que esto hará es reemplazar cualquier ocurrencia de 'npm', en cualquier ruta que haya agregado al 'mapa' sección, y será reemplazado por la cadena ' / node_modules/'.

Documentación Oficial: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#paths

Paquetes

De los documentos:

Los paquetes proporcionan una conveniencia para establecer la configuración de meta y mapa eso es específico de un camino común.

Por ejemplo, si desea cargar su aplicación de esta manera:

System.import('app')

Entonces puedes agregar esto sección de "paquetes":

    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: 'index.js'
            defaultExtension: 'js',
            meta: {
                './*.js': {
                    loader: false,
                }
            }
        }

Aquí está el desglose:

main: 'index.js'

El punto de entrada principal para un paquete o alias de ruta (si no se ha proporcionado ya en la sección 'map')

defaultExtension: 'js'

La extensión de archivo a asumir (si no está ya suministrada). En este caso, busque una .archivo js si no se especifica ningún tipo de archivo.

meta: {
    './*.js': {
        loader: false,
    }
}

Información que SystemJS necesita para determinar cómo cargar los módulos correctamente. En este caso, no invoque el cargador de módulos para any'.js" archivos en nuestra aplicación (lo necesitaría si está utilizando TypeScript: solo desea que SystemJS cargue módulos cuando transpile el TypeScript, y debe ignorar el transpilado .js files)

(consulte los documentos para obtener más información sobre 'meta' - https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#meta )

También vea la documentación oficial aquí para una explicación completa de los 'paquetes' sección:

Https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#packages