Что делает systemjs.config.js в структуре упаковки angular 2?

Ответ 1

Он позволяет настроить SystemJS на загрузку модулей, скомпилированных с помощью компилятора TypeScript. Для анонимных модулей (один модуль для JS файла) он позволяет сопоставить имя модулей с JS файлами, которые фактически содержат код JavaScript модуля.

Вот пример. Если я попытаюсь импортировать модуль с именем app/test, SystemJS сделает:

• Попробуйте найти предварительно зарегистрированный модуль (с System.register('app/test', ...
• Если нет, он заглянет в свою конфигурацию, чтобы построить запрос для выполнения для загрузки соответствующего файла:
  • есть запись map для app
  • есть запись packages для app с defaultExtension= js
• Запрос будет http://localhost:3000/app/test.js. Если у вас map: { app: dist }, запрос будет http://localhost:3000/dist/test.js

Ответ 2

Systemjs.config.js определяет конфигурацию для нормализации пути в SystemJS. Вы загружаете что-то, используя SystemJS следующим образом:

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

Это заставляет SystemJS пытаться загрузить ваше приложение, начиная с файла app/main.js. Однако самое первое, что делает SystemJS - это нормализует путь (app/main.js), что означает, что он преобразует путь в соответствии с правилами в systemjs.config.js.

Systemjs.config.js определяет различные типы псевдонимов для всего, что импортируется SystemJS:

карта

Раздел карты имеет два использования:

наложение пути

В приложении, где SystemJS используется для загрузки модулей, раздел карты используется для создания псевдонима части пути или для указания SystemJS, где на самом деле находится конкретный именованный модуль. Например, вы можете загружать ваше приложение, используя SystemJS следующим образом:

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

Теперь предположим, что вы действительно хотите найти файлы своего приложения в:

/assets/js/app.

Вы можете определить это в разделе 'map' в systemjs.config.js:

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

Затем SystemJS будет искать ваш основной файл по адресу:

/assets/js/app/main.js

определить, где найти модули

Основная фундаментальная цель SystemJS - предоставить модульную систему, которая учитывает отсутствие универсальной поддержки ES-модулей в браузерах, и один из способов сделать это - использовать раздел "map" в systemjs.config.js, чтобы определить, где искать модули.

Для любых модулей, которые импортируются в ваше приложение с использованием стандартных операторов ES 'import', в разделе карты указывается, где SystemJS найдет их (после того, как ваше приложение было загружено с использованием SystemJS). Вот общий пример:

    // 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',

Это означает, что когда вы впервые делаете это в своем корневом модуле:

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

... SystemJS будет обрабатывать импорт путем поиска базовой библиотеки Angular в ее расположении по умолчанию (при условии, что она устанавливается с использованием npm):

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

Теперь вам может быть интересно, как "npm:" переводится в "/node_modules", и что делает раздел "paths" в systemjs.config.js:

пути

В этом разделе определяются псевдонимы для частей путей модуля, которые определены в "map". Способ, которым npm можно использовать для псевдонима в приведенном выше примере, выглядит следующим образом:

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

То, что это сделает, заменит любое вхождение 'npm' в любом пути, который вы добавили в раздел 'map', и он будет заменен строкой '/node_modules/'.

Официальная документация: https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#paths

пакеты

Из документов:

Пакеты обеспечивают удобство настройки мета-конфигурации и конфигурации карты, характерной для общего пути.

Например, если вы хотите загрузить свое приложение так:

System.import('app')

Затем вы можете добавить этот раздел для "пакетов":

    // 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,
                }
            }
        }

Здесь разбивка:

main: 'index.js'

Основная точка входа для псевдонима пакета или пути (если он еще не был указан в разделе "карта")

defaultExtension: 'js'

Предполагаемое расширение файла (если оно еще не указано). В этом случае ищите файл .js, если тип файла не указан.

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

Информация, которая необходима SystemJS для определения правильной загрузки модулей. В этом случае не вызывайте загрузчик модулей для каких-либо файлов .js в нашем приложении (это понадобится вам, если вы используете TypeScript - вы хотите, чтобы SystemJS загружал модули только тогда, когда вы переносите TypeScript, и вам нужно игнорировать перенесенные файлы .js)

(см. документы для получения дополнительной информации о "мета" - https://github.com/systemjs/systemjs/blob/master/docs/config-api.md#meta)

Также смотрите официальную документацию здесь для полного объяснения раздела "пакеты":

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