2015-03-12 25 views
16

के साथ कई परियोजनाओं के बीच कोड साझा करने के लिए कैसे मैं सोच रहा था कि एकाधिक पुस्तकालयों और एकाधिक कोणीयजेएस परियोजनाओं के बीच अपने मॉड्यूल साझा करने का सबसे अच्छा अभ्यास क्या होगा।कोणीय जेएस

मान लीजिए कि मैं दो अलग-अलग परियोजनाओं पर काम कर रहा हूं। दोनों AngularJS तरह पुस्तकालयों पर भरोसा करते हैं, बूटस्ट्रैप आदि

मैं नीचे की तरह एक फ़ाइल संरचना है:

  • परियोजना 1
    • index.html
    • सीएसएस
    • js
      • मॉड्यूल ए
      • मॉड्यूल बी
    • lib
      • कोणीय
      • बूटस्ट्रैप
  • परियोजना 2
    • index.html
    • सीएसएस
    • js
      • मॉड्यूल बी
      • मॉड्यूल एक्स
    • lib
      • कोणीय
      • बूटस्ट्रैप

तो मैं था सभी साझा घटकों के साथ बस एक और निर्देशिका बनाने के बारे में सोच रहा है ताकि मुझे sth मिल सके। जैसे:

  • साझा
    • कोणीय
    • बूटस्ट्रैप
    • मॉड्यूल बी
  • परियोजना 1
    • सूचकांक।एचटीएमएल
    • सीएसएस
    • js
      • मॉड्यूल एक
  • परियोजना 2
    • index.html
    • सीएसएस
    • js
      • मॉड्यूल एक्स

मैं मॉड्यूल बी की तरह लिखा है:

angular.module("moduleB", []) 
    .service("SB", [function() {/*functionality here*/}]); 
    .factory("FB", [function() {/*functionality here*/}]); 

और फिर निर्भरता की तरह के रूप में मेरी परियोजना 1/2 में यह शामिल होंगे:

angular.module("project1", ["moduleB"]); 
इस दृष्टिकोण को प्राप्त करने के लिए

क्या यह सबसे अच्छा तरीका होगा? एक विकल्प क्या हो सकता है?

उत्तर

13

आप इसे इस तरह से कर सकते हैं, लेकिन यदि आप कभी भी प्रोजेक्ट 1 और प्रोजेक्ट 2 साझा घटक के दो अलग-अलग संस्करणों का उपयोग करने के लिए चाहते हैं तो यह आपको सिरदर्द दे सकता है। कल्पना करें कि आपको नवीनतम साझा घटकों के साथ प्रोजेक्ट 1 जारी करने की आवश्यकता है, लेकिन प्रोजेक्ट 2 अभी भी साझा घटकों के पिछले संस्करण पर निर्भर करता है। क्या झंझट है। कुछ अन्य विकल्प:

  1. साझा घटक बनाने बोवर घटक है कि निर्भरता के रूप में या तो परियोजना में शामिल किया जा सकता एक पारस्परिक रूप से पहुँच योग्य URL में (http://briantford.com/blog/angular-bower देखें)
  2. संकलित सभी साझा एसेट (https://medium.com/@KamilLelonek/sharing-templates-between-angular-applications-b56469ec5d85 देखें)
  3. मूल रूप से नकल/परियोजनाओं के बीच पेस्ट घटकों, या तो स्वयं या घूंट की तरह कुछ का उपयोग कर (https://groups.google.com/forum/#!msg/angular/TxE5yoQkG-U/6-vWAZsqn1YJ देख)

दूसरा विकल्प भागों चलती का एक बहुत है और अपने आवेदन करने के लिए परिवर्तन की आवश्यकता है, टी नहीं o प्रत्येक प्रोजेक्ट में साझा कोड के विभिन्न संस्करणों को तैनात करने में असमर्थता का उल्लेख करें। पहले को 3 रिपॉजिटरीज़ में फिसलने में आसान होने का लाभ है: प्रोजेक्ट 1, प्रोजेक्ट 2, और साझा किया गया। यदि साझा किया गया है प्रोजेक्ट 1 और प्रोजेक्ट 2 में बॉवर निर्भरता है, तो एक सरल bower update आपको किसी भी प्रोजेक्ट में नवीनतम संस्करण प्राप्त करेगा। या आप किसी प्रोजेक्ट को साझा किए गए विशेष संस्करणों में लॉक कर सकते हैं।

विकल्प 3 ऐसा लगता है कि यह आपको सबसे अधिक नियंत्रण देता है, लेकिन आप जल्दी से ट्रैक करेंगे कि आपके प्रोजेक्ट का साझा करने वाला कौन सा संस्करण उपयोग कर रहा है। विकल्प 1 हल करता है।

+0

को लगता है कि मैं दोनों में साझा घटकों की जरूरत है की सुविधा देता है, परियोजना 1 और 2 हमेशा अप टू डेट के रूप में वे वास्तव में एक ही कोड बेस पर निर्भर हैं। इस मामले में क्या चुना जाना सबसे अच्छा होगा? – Fidel90

+1

विकल्प 1 अभी भी सबसे अच्छा अभ्यास है, लेकिन मैं सराहना करता हूं कि यह उन चरणों को कैसे जोड़ता है जिन्हें भुलाया जा सकता है, जिसके परिणामस्वरूप आउट-ऑफ-सिंक कोड होता है। आप अपनी संपूर्ण संरचना को ऊपर (दोनों परियोजनाओं और साझा) को एक ही भंडार में डाल सकते हैं। मुझे नहीं पता कि आप कैसे तैनात कर रहे हैं, लेकिन मुझे लगता है कि प्रत्येक परियोजना एक वेबसाइट की जड़ है। आप गलप का उपयोग 1 तक कर सकते हैं) साझा संपत्ति को एक परियोजना में कॉपी करें और/या 2) संकलित करें (यानी, जेएस के मामले में संक्षिप्त और संक्षिप्त करें) परियोजना में साझा संपत्तियां। असल में, gulp.src (SHARED_STUFF) ... DO_GULP_STUFF ... पाइप (gulp.dest (PROJECT_DESTINATION))। –

5

एक और संभावित विकल्प आपके साझा कोड को एनपीएम मॉड्यूल के रूप में प्रकाशित करना है। यदि कोड निजी है तो आप इसके लिए npm Private Modules का उपयोग कर सकते हैं, हालांकि निजी मॉड्यूल का उपयोग करने के लिए लागत है।

या तो या जैजिसन के उत्तर में वर्णित बोवर दृष्टिकोण के साथ बड़े मोनोलिथिक "साझा" मॉड्यूल होने के बजाय, अपने मॉड्यूल को अपने विशिष्ट उद्देश्यों के आधार पर छोटे मॉड्यूल में तोड़ने का प्रयास करें।

इसका लाभ यह है कि यदि आपको कोई बग मिलती है, या कोई सुधार होता है, तो आप आसानी से देख सकते हैं कि आपकी कौन सी परियोजनाएं प्रभावित हो सकती हैं। require या ES2015 import सिंटैक्स उसमें बहुत मदद करता है जैसा कि आप कहेंगे। import { calculateLineTotal } from OrderLogic.js, इसलिए कोड में सभी स्थानों को खोजने के लिए यह छोटा है कि calculateLineTotal में परिवर्तन प्रभावित होगा।

0

एक और विकल्प to use Bit होगा।

यह आपको अपने एनजी प्रोजेक्ट से घटकों को साझा संग्रह में साझा करने में सक्षम बनाता है, और अन्य पुस्तकालयों/पैकेजों को स्थापित किए बिना उन्हें अन्य परियोजनाओं में उपयोग करता है।

शुभकामनाएं।

0

या बस कर ...

"dependencies" : { 
    "shared-code" : "git://github.com/user/shared-code.git", 
}