Загрузка модуля TypeScript с подмодулями в SystemJS

Question

Как загружать модули с помощью SystemJS, если они сгенерированы TypeScript как один файл, содержащий несколько подмодулей?

В настоящее время у меня есть большая библиотека с именем form, которая построена в одном файле, содержащем несколько подмодулей (например, пакеты). Для создания файла библиотеки я использую этот TSconfig:

{ 
    "compilerOptions": { 
    "target": "ES5", 
    "module": "system", 
    "moduleResolution": "node", 
    "noResolve": true, 
    "outFile": "../dist/lib/form.js", 
    "declaration": true, 
    "removeComments": false, 
    "noImplicitAny": true 
    }, 
    "exclude": [ 
    "lib", 
    "node_modules" 
    ], 
    "filesGlob": [ 
    "**/*.ts" 
    ] 
} 

В результате я получаю form.js файла, который содержит модули, что сами по себе содержат классы и так далее.

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

Например:

import {Version}  from 'form';   // loaded from 'form.js' 
import {ObservableSet} from 'form/collection'; // loaded from 'form/collection.js' 
import {Button}  from 'form/ui/control'; // loaded from 'form/ui/control.js' 

Но я хочу, чтобы загрузить все из них только form.js, потому что «форма/коллекции» и «вида/UI/управления» модули, определенные в форме .js. Файлы форму/collection.js и 'form/ui/control.js' не существует.

Итак, как бы изменить следующую конфигурацию для SystemJS, чтобы она загружала все три класса из form.js?

System.config({ 
    baseURL: '.', 
    defaultExtension: 'js', 
    paths: { 
     '*': '*.js' 
    }, 
    map: { 
     'form':  'lib/form', 
     'shop':  'lib/shop', 
     'is':   'lib/is', 
     'jquery':  'lib/jquery-2.1.4' 
    } 
}); 

System.import('shop'); 

Каталог раскладка:

/lib/form.js   (the module file, containing multiple modules) 
/lib/shop.js   (the application) 
/lib/... 
/config.js   (config for systemjs, as shown) 
/index.html 

Answer 1

я пропустил, что SystemJS имеет расслоения вариант. Следующее дополнение позволяет SystemJS знать, что эти модули должны быть загружены после загрузки модуля «form», который сам предоставляет все упомянутые модули, чтобы он не пытался загружать их из другого файла.

bundles: { 
    'form': ['form/collection', 'form/ui/control'] 
} 

Примечание 1: Убедитесь, что пакет не имеет такое же имя, как один из импортируемых модулей. Это приводит к конфликту имен. В следующем примере, скорее всего, причиной неприятностей, потому что form используется дважды, называя сверток, а также модуль внутри пучка:

bundles: { 
    'form': ['form', 'form/something'] 
} 

Примечание 2: SystemJS поддерживает групповые символы в пучках. Но они не глубоки. Это означает, что form/* добавит модуль form/collection, но он не добавит form/ui/control. Чтобы добавить также каждый модуль под form/ui, ему нужна дополнительная запись form/ui/*.

Пример:

bundles: { 
    'form': ['form/*', 'form/ui/*'] 
}