जेएसपीएम प्लगइन्स स्थापित करते समय config.js पर निर्भरताओं को जोड़ने से कैसे बचें?

Question

जब मैं css प्लगइन स्थापित है, तो निम्न आदेश का उपयोग:

jspm install css 

निम्नलिखित मेरी config.js में जोड़ा जाता है:

System.config({ 
    "map": { 
    "css": "github:systemjs/plugin-css@0.1.6", 
    "github:jspm/nodelibs-assert@0.1.0": { 
     "assert": "npm:assert@1.3.0" 
    }, 
    "github:jspm/nodelibs-buffer@0.1.0": { 
     "buffer": "npm:buffer@3.0.3" 
    }, 
    "github:jspm/nodelibs-events@0.1.0": { 
     "events-browserify": "npm:events-browserify@0.0.1" 
    }, 
    "github:jspm/nodelibs-http@1.7.0": { 
     "Base64": "npm:Base64@0.2.1", 
     "events": "github:jspm/nodelibs-events@0.1.0", 
     "inherits": "npm:inherits@2.0.1", 
     "stream": "github:jspm/nodelibs-stream@0.1.0", 
     "url": "github:jspm/nodelibs-url@0.1.0", 
     "util": "github:jspm/nodelibs-util@0.1.0" 
    }, 
    "github:jspm/nodelibs-https@0.1.0": { 
     "https-browserify": "npm:https-browserify@0.0.0" 
    }, 
    "github:jspm/nodelibs-os@0.1.0": { 
     "os-browserify": "npm:os-browserify@0.1.2" 
    }, 
    "github:jspm/nodelibs-path@0.1.0": { 
     "path-browserify": "npm:path-browserify@0.0.0" 
    }, 
    "github:jspm/nodelibs-process@0.1.1": { 
     "process": "npm:process@0.10.1" 
    }, 
    "github:jspm/nodelibs-stream@0.1.0": { 
     "stream-browserify": "npm:stream-browserify@1.0.0" 
    }, 
    "github:jspm/nodelibs-url@0.1.0": { 
     "url": "npm:url@0.10.3" 
    }, 
    "github:jspm/nodelibs-util@0.1.0": { 
     "util": "npm:util@0.10.3" 
    }, 
    "github:systemjs/plugin-css@0.1.6": { 
     "clean-css": "npm:clean-css@3.0.10", 
     "fs": "github:jspm/nodelibs-fs@0.1.1", 
     "path": "github:jspm/nodelibs-path@0.1.0" 
    }, 
    "npm:amdefine@0.1.0": { 
     "fs": "github:jspm/nodelibs-fs@0.1.1", 
     "module": "github:jspm/nodelibs-module@0.1.0", 
     "path": "github:jspm/nodelibs-path@0.1.0", 
     "process": "github:jspm/nodelibs-process@0.1.1" 
    }, 
    "npm:assert@1.3.0": { 
     "util": "npm:util@0.10.3" 
    }, 
    "npm:buffer@3.0.3": { 
     "base64-js": "npm:base64-js@0.0.8", 
     "ieee754": "npm:ieee754@1.1.4", 
     "is-array": "npm:is-array@1.0.1" 
    }, 
    "npm:clean-css@3.0.10": { 
     "buffer": "github:jspm/nodelibs-buffer@0.1.0", 
     "commander": "npm:commander@2.5.1", 
     "fs": "github:jspm/nodelibs-fs@0.1.1", 
     "http": "github:jspm/nodelibs-http@1.7.0", 
     "https": "github:jspm/nodelibs-https@0.1.0", 
     "os": "github:jspm/nodelibs-os@0.1.0", 
     "path": "github:jspm/nodelibs-path@0.1.0", 
     "process": "github:jspm/nodelibs-process@0.1.1", 
     "source-map": "npm:source-map@0.1.43", 
     "url": "github:jspm/nodelibs-url@0.1.0", 
     "util": "github:jspm/nodelibs-util@0.1.0" 
    }, 
    "npm:commander@2.5.1": { 
     "child_process": "github:jspm/nodelibs-child_process@0.1.0", 
     "events": "github:jspm/nodelibs-events@0.1.0", 
     "path": "github:jspm/nodelibs-path@0.1.0", 
     "process": "github:jspm/nodelibs-process@0.1.1" 
    }, 
    "npm:core-util-is@1.0.1": { 
     "buffer": "github:jspm/nodelibs-buffer@0.1.0" 
    }, 
    "npm:events-browserify@0.0.1": { 
     "process": "github:jspm/nodelibs-process@0.1.1" 
    }, 
    "npm:https-browserify@0.0.0": { 
     "http": "github:jspm/nodelibs-http@1.7.0" 
    }, 
    "npm:inherits@2.0.1": { 
     "util": "github:jspm/nodelibs-util@0.1.0" 
    }, 
    "npm:os-browserify@0.1.2": { 
     "os": "github:jspm/nodelibs-os@0.1.0" 
    }, 
    "npm:path-browserify@0.0.0": { 
     "process": "github:jspm/nodelibs-process@0.1.1" 
    }, 
    "npm:punycode@1.3.2": { 
     "process": "github:jspm/nodelibs-process@0.1.1" 
    }, 
    "npm:readable-stream@1.1.13": { 
     "buffer": "github:jspm/nodelibs-buffer@0.1.0", 
     "core-util-is": "npm:core-util-is@1.0.1", 
     "events": "github:jspm/nodelibs-events@0.1.0", 
     "inherits": "npm:inherits@2.0.1", 
     "isarray": "npm:isarray@0.0.1", 
     "process": "github:jspm/nodelibs-process@0.1.1", 
     "stream": "npm:stream-browserify@1.0.0", 
     "string_decoder": "npm:string_decoder@0.10.31", 
     "util": "github:jspm/nodelibs-util@0.1.0" 
    }, 
    "npm:source-map@0.1.43": { 
     "amdefine": "npm:amdefine@0.1.0", 
     "fs": "github:jspm/nodelibs-fs@0.1.1", 
     "path": "github:jspm/nodelibs-path@0.1.0", 
     "process": "github:jspm/nodelibs-process@0.1.1" 
    }, 
    "npm:stream-browserify@1.0.0": { 
     "events": "github:jspm/nodelibs-events@0.1.0", 
     "inherits": "npm:inherits@2.0.1", 
     "readable-stream": "npm:readable-stream@1.1.13" 
    }, 
    "npm:string_decoder@0.10.31": { 
     "buffer": "github:jspm/nodelibs-buffer@0.1.0" 
    }, 
    "npm:url@0.10.3": { 
     "assert": "github:jspm/nodelibs-assert@0.1.0", 
     "punycode": "npm:punycode@1.3.2", 
     "querystring": "npm:querystring@0.2.0", 
     "util": "github:jspm/nodelibs-util@0.1.0" 
    }, 
    "npm:util@0.10.3": { 
     "inherits": "npm:inherits@2.0.1", 
     "process": "github:jspm/nodelibs-process@0.1.1" 
    } 
    } 
}); 

मैं अपने config.js सुथरा क्रम में करने के लिए रख सकते हैं मेरे सभी पृष्ठों में यह सारी जानकारी शामिल करने से बचें (क्योंकि config.js को प्रत्येक पृष्ठ में शामिल करने की आवश्यकता है)?

Answer 1

मैं भी JSPM के लिए नया हूँ और बड़े config.js आकार के बारे में एक ऐसी ही प्रतिक्रिया थी, लेकिन यहाँ कुछ चीजें मैंने सीखा है है:

1) मैं नोड मॉड्यूल के लिए JSPM का उपयोग नहीं होता है कि आप केवल सर्वर साइड/विकास मशीन पर उपयोग करना चाहते हैं। आप बस उन लोगों के लिए एनपीएम का उपयोग जारी रख सकते हैं। मैंने यह गलती की - यह सोचकर कि मुझे सभी निर्भरताओं के लिए जेएसपीएम का उपयोग करना चाहिए, बोवर और एनपीएम दोनों को बदलना। मैंने जेएसपीएम के माध्यम से gulp स्थापित किया और मेरी config.js अचानक 700 लाइनों से अधिक लंबी थी!

2) मुझे आश्चर्य हुआ कि क्या इसे शीर्ष स्तर की निर्भरताओं को रिकॉर्ड करने के लिए कॉन्फ़िगर करना संभव था - जैसे पैकेज.जेसन - निर्भरताओं की सभी निर्भरता नहीं ... यह ऐसा नहीं लगता है। मैंने Gitter group में पूछा और प्रतिक्रिया थी: "जितना बड़ा है, यह आपको सहकर्मी निर्भरताओं पर नियंत्रण देता है जो आपके पास एनपीएम में नहीं है"। (धन्यवाद Mitranim)।

3) यदि आप require.js से परिचित हैं, तो आप अपने config.js को अपने require.config(...) की तरह थोड़ा सोच सकते हैं। चीजों में से एक यह है कि आप अपने मॉड्यूल को शामिल करने के लिए अपने छोटे नाम स्थापित कर सकते हैं। एक पूर्व requ.js उपयोगकर्ता के रूप में, मैंने स्वीकार किया कि मुझे प्रवेश की स्थिति के रूप में फ्रंट-एंड पर मेरी requ.js कॉन्फ़िगरेशन फ़ाइल शामिल करने की आवश्यकता है, और इसके लिए config.js के लिए - कम से कम, विकास के लिए ...

4) उत्पादन एक और मामला है। Guy Bedford on the Gitter group उद्धरण: "कॉन्फ़िगरेशन फ़ाइल को उत्पादन \ वर्कफ़्लोज़ में शामिल करने के लिए नहीं है जो" "विकसित होगा। प्रारंभ करने वाली मार्गदर्शिका में "Bundle for production" section में और जानकारी है।

5) मुझे एक उपयोगी प्रारंभिक बिंदु Jack Franklin का demo from Async Brighton मिला है। विशेष रूप से नोट: उसके पास उत्पादन के लिए एक बंडल वर्कफ़्लो है जो स्क्रिप्ट को स्विच करता है, केवल app.min.js को इंगित करने के लिए - Makefile देखें।