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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (70)

我正在尝试使用System.JS将材料用户界面导入到我的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某个包下?

提问于
用户回答回答于
'material-ui': {
  map: {
    './AppBar': './AppBar/AppBar.js',
    './AppHeader': './AppHeader/AppHeader.js',
    './AppFooter': './AppFooter/AppFooter.js',
    //etc
  }
}

扫码关注云+社区

领取腾讯云代金券