मैं ./[module] को /[module]/[module].js को System.JS में कैसे मैप करूं?

Question

मैं अपने प्रतिक्रिया एप्लिकेशन में आयात करने के लिए सामग्री-ui कोशिश कर रहा हूँ System.JS का उपयोग कर

मेरे ऐप में, मैं यह कर रहा हूँ:

:

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

यहाँ मेरी System.JS config है

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 

,210

पैकेज के वृक्ष संरचना में, इन मॉड्यूल में से प्रत्येक के इस तरह अपनी निर्देशिका के तहत संग्रहीत किया जाता है:

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 का उपयोग कर मेरे एप्लिकेशन बंडल सिर्फ browserify('./path/to/root/index.js') फोन करके, सभी सामग्री-ui मॉड्यूल किसी भी मुद्दे के बिना आयात मिलता है।

Answer 1

वाइल्डकार्ड पथ supported सिस्टम.जेएस में नहीं हैं। आप मैन्युअल रूप से प्रत्येक मॉड्यूल के लिए एक प्रविष्टि जोड़ने के लिए करना होगा:

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

तुम भी jspm का उपयोग आप के लिए है कि सूची बनाने के लिए कर सकते हैं।