如何将 ./[module] 映射到 System.JS 中的 /[module]/[module].js？

Question

我正在尝试使用 System.JS

将 material-ui 导入我的 React 应用程序

在我的应用程序中，我这样做：

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

这是我的 System.JS 配置：

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 对此布局没有任何问题，因此当我仅通过调用 browserify('./path/to/root/index.js') 使用 browserify 捆绑我的应用程序时，所有 material-ui 模块顺利导入。

Answer 1

System.js 中的通配符路径不是 supported。您必须为每个模块手动添加一个条目：

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

您也可以使用 jspm 为您生成该列表。

如何将 ./[module] 映射到 System.JS 中的 /[module]/[module].js？

How do I map ./[module] to /[module]/[module].js in System.JS?

javascript

systemjs