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

我正在尝试使用System.JS将材质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'
        },
    }
});

它加载

节点\u模块/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'

，等等，所以实际上要导入

材质ui/AppBar

，我需要System.JS加载

节点\模块/material ui/AppBar/AppBar.JS

或

节点\模块/material ui/AppBar/index.JS

相反，System.JS正在尝试加载不存在的

node\u模块/material ui/AppBar.JS

如果我在

程序包下为每个模块添加单独的条目

：

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

它可以工作，但是通配符：

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

不要

如何将System.JS映射到某个包下的

/*

到

/*/*.JS

---

顺便说一句，browserify在这个布局上没有任何问题，所以当我通过调用

browserify（'./path/to/root/index.js'）

，使用browserify捆绑我的应用程序时，所有的材质ui模块都会被导入，没有任何问题。

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

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

---

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

请注意，您链接到的注释是关于

路径设置，而不是
映射设置。@hackerrdave:谢谢。
jspm
是生成System.JS配置的工具吗？（似乎是的，从文档中我看不太清楚）。考虑到我有一个
index.js
文件，该文件递归加载一组模块，我可以通过使用零配置运行
browserify
将其转换为一个包，如OP中所述，如何使用
jspm
生成配置？这里真正的问题是SystemJS不支持节点模块解析。我想他们计划添加它，但现在像Browserify和Webpack这样的东西可以开箱即用。你有什么理由需要使用SystemJS吗？@Menello:没有任何理由，除了我只熟悉Browserify的捆绑功能（这就是我在系统中实际使用它的方式），而对Webpack一点也不熟悉。我觉得SystemJS可以在模块中解析
package.json
。我所追求的是能够使用
node\u modules
和源代码树中的各个包，而不必在开发周期中将它们捆绑起来，这样我就可以在
node\u modules
中适当地破解包，刷新并立即看到发生了什么，而不必捆绑整个东西。我不打算在生产环境中使用System.JS。如果您正在为node modules文件夹提供服务，您可以在其中添加一个脚本标记：
？这就足够了吗？@Menello:你是说文件夹中的所有模块？我希望它们按需递归加载，因为我在JS代码中导入它们。嗯，除了使用捆绑系统之外，我认为这是不可能的，或者你可以在支持JS导入的浏览器中这样做。。。不过这很有趣。