¿Qué hace systemjs.config.js en la estructura de empaquetado angular 2?

Solución:

Permite configurar SystemJS para cargar módulos compilados usando el compilador TypeScript. Para módulos anónimos (un módulo por archivo JS), permite mapear el nombre de los módulos a archivos JS que realmente contienen el código JavaScript del módulo.

Aquí tienes una muestra. Si intento importar el módulo llamado app/test, SystemJS hará:

• Intente encontrar un módulo prerregistrado (con System.register('app/test', ...
• De lo contrario, buscará en su configuración para construir la solicitud a ejecutar para cargar el archivo correspondiente:
  • hay un map entrada para app
  • hay un packages entrada para app con defaultExtension = js
• La solicitud será http://localhost:3000/app/test.js. Si usted tiene map: { app: dist }, la solicitud sería http://localhost:3000/dist/test.js

Systemjs.config.js define la configuración para Normalización de ruta en SystemJS. Cargas algo usando SystemJS así:

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

Esto hace que SystemJS intente cargar su aplicación, comenzando con el archivo app / main.js. los lo primero que hace SystemJS sin embargo es para normalizar la ruta (app / main.js), lo que significa que traduce la ruta 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 se usa SystemJS para cargar los módulos, la sección del mapa se usa para alias una parte de la ruta, o para decirle a SystemJS dónde se encuentra realmente un módulo con nombre en particular. Por ejemplo, puede estar cargando su aplicación usando SystemJS así:

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

Ahora, digamos que realmente desea ubicar los archivos de su aplicación en:

/assets/js/app.

Puede definir esto en la sección ‘mapa’ 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 ‘mapa’ de systemjs.config.js para identificar dónde para buscar módulos.

Para cualquier módulo que se esté importando dentro de su aplicación utilizando las declaraciones de ‘importación’ estándar de ES, la sección del mapa identifica dónde los encontrará SystemJS (después de que su aplicación se haya cargado usando SystemJS). He aquí 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 hace esto por primera vez en su módulo raíz:

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

… SystemJS manejará la importación buscando la biblioteca central de Angular en su ubicación predeterminada (asumiendo que se está instalando usando npm):

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

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

---

caminos

Esta sección define alias para partes de las rutas del módulo que se definen en ‘mapa’. La forma en que ‘npm’ puede tener un alias en el ejemplo anterior es así:

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

Lo que hará esto es reemplazar cualquier aparición de ‘npm’, en cualquier ruta que haya agregado a la sección ‘mapa’, y será reemplazada con la cadena ‘/ node_modules /’.

Documentación oficial: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#paths (muerto)

---

paquetes

De los documentos:

Los paquetes brindan una conveniencia para establecer la configuración de meta y mapa que es específica para una ruta común.

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

System.import('app')

Luego puede agregar esta sección para ‘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 aún no se ha proporcionado en la sección ‘mapa’)

defaultExtension: 'js'

La extensión de archivo que se asumirá (si aún no se ha proporcionado). En este caso, busque un 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 ningún archivo ‘.js’ en nuestra aplicación (lo necesitaría si está usando TypeScript; solo desea que SystemJS cargue módulos cuando transpile el TypeScript, y necesita ignorar los archivos .js transpilados)

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

También consulte la documentación oficial aquí para obtener una explicación completa de la sección ‘paquetes’:

https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#packages (muerto)

---

---

Utiliza Nuestro Buscador