如何在System.JS中將./[module映射到/[module]/[module].js？

我試圖進口材料的UI到我的陣營應用程序中使用System.JS如何在System.JS中將./[module映射到/[module]/[module].js？

在我的應用程序，我這樣做：

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在某個包下？

作爲一個側面說明，browserify沒有用這個佈局有任何問題，所以當我使用browserify捆綁我的應用程序只是通過調用browserify('./path/to/root/index.js')，所有材料的UI模塊得到沒有任何問題進口。

來源

2017-02-10 Quassnoi

這裏真正的問題是SystemJS不支持節點模塊解析。我認爲他們計劃添加它，但是現在像Browserify和Webpack這樣的東西可以做類似於開箱即用的東西。是否有任何理由需要使用SystemJS？ – Menello

@Menello：除了我只熟悉Browserify的捆綁能力（這是我在系統中實際使用它的方式）並且對Webpack根本不熟悉之外，沒有任何理由。我在印象之下SystemJS可以解析模塊中的'package.json'。我所追求的是能夠使用'node_modules'和源代碼樹中的單個包，而不必在開發週期中將它們捆綁在一起，這樣我就可以在'node_modules'中入侵一個包，刷新並立即看到什麼發生，而不必捆綁整個事情。我不打算在生產中使用System.JS。 – Quassnoi

如果您正在爲您的節點模塊文件夾提供服務，您可以爲其添加一個腳本標記：''？這足夠嗎？ – Menello

System.js中的通配符路徑不是supported。您必須手動添加一個條目爲每個模塊：

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

您還可以使用jspm生成列表供您。

來源

2017-02-20 14:25:04 hackerrdave

請注意，您鏈接到的評論是關於「路徑」設置，而不是「地圖」設置。 – Louis

啊謝謝 - 將修復 – hackerrdave

@hackerrdave：謝謝。 'jspm'是生成System.JS配置的工具嗎？（似乎是的，這只是從文檔中不明顯）。鑑於我有一個'index.js'文件遞歸地加載了一堆模塊，並且我可以通過在零配置下運行'browserify'來轉換爲一個包，如OP所述，我如何使用'jspm'來生成配置？ – Quassnoi

如何在System.JS中將./[module映射到/[module]/[module].js？

回答

相關問題