[英]How do I map ./[module] to /[module]/[module].js in System.JS?
I'm trying to import material-ui into my React app using System.JS 我正在尝试使用System.JS将material-ui导入到我的React应用程序中
In my app, I'm doing this: 在我的应用程序中,我这样做:
import {AppBar, Tabs, Tab, Card, CardTitle} from 'material-ui';
Here's my System.JS config: 这是我的System.JS配置:
System.config({
baseURL: '/node_modules',
packageConfigPaths: [
'*/package.json'
],
packages: {
'.': {
defaultExtension: 'js',
main: 'index.js'
},
}
});
It loads node_modules/material-ui/index.js
which has a bunch of imports inside it: 它加载了
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
In the package's tree structure, each of these modules is stored under its own directory like this: 在包的树结构中,每个模块都存储在它自己的目录下,如下所示:
material-ui/
index.js
AppBar/
AppBar.js
index.js -- just reexports './AppBar'
AutoComplete/
AutoComplete.js
index.js -- just reexports './AutoComplete'
, etc., so in fact to import material-ui/AppBar
, I need System.JS to load node_modules/material-ui/AppBar/AppBar.js
or node_modules/material-ui/AppBar/index.js
. 等,所以实际上要导入
material-ui/AppBar
,我需要System.JS来加载node_modules/material-ui/AppBar/AppBar.js
或node_modules/material-ui/AppBar/index.js
。
Instead, System.JS is trying to load node_modules/material-ui/AppBar.js
which is not there. 相反,System.JS正在尝试加载不存在的
node_modules/material-ui/AppBar.js
。
If I add individual entries for each module under packages
: 如果我在
packages
下添加每个模块的单个条目:
'material-ui': {
map: {
'./AppBar': './AppBar/AppBar.js'
}
}
it works, however wildcards: 它有效,但是通配符:
'material-ui': {
map: {
'./*': './*/*.js'
}
}
don't. 别。
How do I make System.JS map ./*
to ./*/*.js
under a certain package? 如何使System.JS映射
./*
到./*/*.js
一定包下?
As a side note, browserify does not have any problems with this layout, so when I bundle my app using browserify just by calling browserify('./path/to/root/index.js')
, all material-ui modules get imported without any issues. 作为旁注,browserify对此布局没有任何问题,因此当我使用browserify通过调用
browserify('./path/to/root/index.js')
捆绑我的应用程序时,所有material-ui模块都会被导入没有任何问题。
Wildcard paths are not supported in System.js. System.js不支持通配符路径。 You will have to manually add an entry for each module:
您必须为每个模块手动添加条目:
'material-ui': {
map: {
'./AppBar': './AppBar/AppBar.js',
'./AppHeader': './AppHeader/AppHeader.js',
'./AppFooter': './AppFooter/AppFooter.js',
//etc
}
}
You can also use jspm to generate that list for you. 您也可以使用jspm为您生成该列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.