我正在尝试使用 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
hoặc 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 捆绑我的应用程序时,只需调用 browserify('./path/to/root/index.js')
,所有 material-ui 模块都可以毫无问题地导入。
通配符路径不是 supported在 System.js 中。您必须为每个模块手动添加一个条目:
'material-ui': {
map: {
'./AppBar': './AppBar/AppBar.js',
'./AppHeader': './AppHeader/AppHeader.js',
'./AppFooter': './AppFooter/AppFooter.js',
//etc
}
}
您还可以使用 jspm为您生成该列表。
Tôi là một lập trình viên xuất sắc, rất giỏi!