Как сопоставить. /[module] с/[module]/[module].js в System.JS?

Я пытаюсь импортировать материал-ui в свое приложение React с помощью System.JS

В моем приложении я делаю это:

import {AppBar, Tabs, Tab, Card, CardTitle} from 'material-ui';

Здесь мой System.JS config:

System.config({
    baseURL: '/node_modules',
    packageConfigPaths: [
        '*/package.json'
    ],
    packages: {
        '.': {
            defaultExtension: 'js',
            main: 'index.js'
        },
    }
});

Он загружает node_modules/material-ui/index.js, у которого есть куча импорта внутри него:

var _AppBar2 = require('./AppBar');

var _AppBar3 = _interopRequireDefault(_AppBar2);

var _AutoComplete2 = require('./AutoComplete');

var _AutoComplete3 = _interopRequireDefault(_AutoComplete2);

// ... etc, about 40 of them.

exports.AppBar = _AppBar3.default;
exports.AutoComplete = _AutoComplete3.default;

// ... etc

В структуре дерева пакетов каждый из этих модулей хранится в его собственном каталоге следующим образом:

material-ui/
  index.js
  AppBar/
     AppBar.js
     index.js -- just reexports './AppBar'
  AutoComplete/
     AutoComplete.js
     index.js -- just reexports './AutoComplete'

и т.д., поэтому на самом деле для импорта material-ui/AppBar мне нужна System.JS для загрузки node_modules/material-ui/AppBar/AppBar.js или node_modules/material-ui/AppBar/index.js.

Вместо этого System.JS пытается загрузить node_modules/material-ui/AppBar.js, которого нет.

Если я добавляю отдельные записи для каждого модуля в packages:

'material-ui': {
    map: {
        './AppBar': './AppBar/AppBar.js'
    }
}

он работает, однако подстановочные знаки:

'material-ui': {
    map: {
        './*': './*/*.js'
    }
}

нет.

Как мне сделать карту System.JS ./* в ./*/*.js под определенным пакетом?

В качестве побочного примечания браузер не имеет никаких проблем с этим макетом, поэтому, когда я собираю свое приложение, используя браузер, просто вызывая browserify('./path/to/root/index.js'), все материальные модули ui импортируются без каких-либо проблем.

Ответы

Ответ 1

Подстановочные пути не поддерживается в System.js. Вам нужно будет вручную добавить запись для каждого модуля:

'material-ui': {
  map: {
    './AppBar': './AppBar/AppBar.js',
    './AppHeader': './AppHeader/AppHeader.js',
    './AppFooter': './AppFooter/AppFooter.js',
    //etc
  }
}

Вы также можете использовать jspm для создания этого списка.