Comment faire correspondre ./[module] à /[module]/[module].js dans System.JS ?

Question

J'essaie d'importer material-ui dans mon application React en utilisant System.JS

C'est ce que je fais dans mon application :

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

Voici ma configuration System.JS :

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

Il charge node_modules/material-ui/index.js qui contient un certain nombre d'importations :

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

Dans l'arborescence du paquet, chacun de ces modules est stocké dans son propre répertoire, comme suit :

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

etc., de sorte qu'en fait, pour importer material-ui/AppBar J'ai besoin que System.JS soit chargé node_modules/material-ui/AppBar/AppBar.js ou node_modules/material-ui/AppBar/index.js .

Au lieu de cela, System.JS essaie de charger node_modules/material-ui/AppBar.js qui n'existe pas.

Si j'ajoute des entrées individuelles pour chaque module sous packages :

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

cela fonctionne, mais avec des caractères génériques :

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

ne le font pas.

Comment faire en sorte que System.JS map ./* à ./*/*.js sous un certain paquet ?

---

Par ailleurs, browserify n'a aucun problème avec cette mise en page, donc lorsque je regroupe mon application en utilisant browserify, j'appelle simplement browserify('./path/to/root/index.js') Tous les modules material-ui sont importés sans problème.

Answer 1

Les chemins d'accès avec caractères génériques ne sont pas soutenu dans System.js. Vous devrez ajouter manuellement une entrée pour chaque module :

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

Vous pouvez également utiliser jspm pour générer cette liste pour vous.