कोणीय 2 लाइब्रेरी कैसे बनाएं, जिसे सभी स्क्रिप्ट लोडर्स द्वारा समर्थित किया जा सकता है

Question

मैं एक जावास्क्रिप्ट फ़ाइल कैसे बना सकता हूं जिसमें एक कोणीय 2 मॉड्यूल शामिल है जिसे अन्य अनुप्रयोगों द्वारा उपयोग किया जा सकता है, लेकिन सीधे एक केंद्रीकृत सर्वर से रनटाइम पर लोड किया गया है और नहीं एक विशिष्ट अनुप्रयोग के कोड में बंडल?

एंगुलर 2 लाइब्रेरी के लिए इसे सीडीएन के रूप में सोचें। आवश्यकता यह है कि इस पुस्तकालय के उपभोक्ताओं को उनके पृष्ठ पर एक ही स्क्रिप्ट शामिल होगी।

इसे इस तरह कार्यान्वित करने की आवश्यकता है, इसलिए मुझे किसी भी उत्तर में दिलचस्पी नहीं है जो लाइब्रेरी को व्यक्तिगत एप्लिकेशन की आउटपुट फ़ाइलों में बंडल करने का सुझाव देती है। लाइब्रेरी स्क्रिप्ट को लाइब्रेरी के सर्वर से सीधे रनटाइम पर लोड किया जाना चाहिए।

• केंद्रीकृत वेब एप्लिकेशन CustomAuth कहा जाता है
• CustomAuth एक भी कोणीय 2 मॉड्यूल CustomAuthModule
• बुलाया CustomAuthModule कई सेवाओं और घटक है कि बाहरी कोणीय 2 अनुप्रयोगों के द्वारा इस्तेमाल किया जा सकता को उजागर करता है।

यहां वांछित वर्कफ़्लो (उच्च स्तर से) है।

• एक डेवलपर BookLibrary नामक उनके कोणीय 2 एप्लिकेशन में कस्टमएथ का उपयोग करना चाहता है।
• डेवलपर के इंडेक्स पेज पर, वे एक स्क्रिप्ट जोड़ते हैं जो http://server-url/CustomAuth/script पर इंगित करता है। उपभोक्ता को मॉड्यूल लोडर्स जैसे सिस्टमज या वेबपैक के बारे में कुछ भी जानने की आवश्यकता नहीं होनी चाहिए।
• उनके कोणीय 2 कोड में, वे कस्टमऑथ मॉड्यूल (सेवाओं, घटकों, आदि ...) से सामान आयात करते हैं।
• जब वे कोणीय-क्ली का उपयोग करके अपने अनुप्रयोग को संकलित करते हैं, तो इसमें कस्टमएथ कोड शामिल नहीं होगा, लेकिन इसके बजाय यह मान लेंगे कि इसे रनटाइम पर फ्लाई पर लोड किया जाएगा।

मैंने इस पर बहुत सारे शोध किए हैं, और मुझे कोई भाग्य नहीं है। किसी भी तरह की सहायता का स्वागत किया जाएगा।

Answer 1

आप इसे ES6 + Angular2 + Webpack के साथ प्राप्त कर सकते हैं।

उसमें जाने से पहले, मुझे बताएं कि umd मॉड्यूल सिस्टम क्या है।

UMD पैटर्न आम तौर पर दिन के सबसे लोकप्रिय स्क्रिप्ट लोडर के साथ संगतता (अन्य लोगों के जैसे RequireJS)

के रूप में ऊपर उद्धृत की पेशकश करने का प्रयास करता UMD एक पैटर्न जहां पुस्तकालयों इस के साथ बनाया है पैटर्न requirejs, webpack, browserify, systemjs की तरह सभी मॉड्यूल/लिपि लोडर का समर्थन करेगा आदि Ie पुस्तकालयों जिसका पालन UMD पैटर्न सभी प्रमुख मॉड्यूल सिस्टम (AMD, CommonJS,द्वारा मान्यता प्राप्त किया जाएगाऔर Vanilla JS)।

यह तरीका है कि सीडीएन में सभी पुस्तकालय काम करते हैं।

अब, आपको भी उसी iee UMD पैटर्न का पालन करना होगा। चूंकि आपकी लाइब्रेरी angular2 पर है, इसलिए मैं आपको ES6, Angular2 और Webpack के साथ जाने का सुझाव दूंगा।

आपको इन कॉन्फ़िगरेशन को यूएमडी प्रारूप में लाइब्रेरी प्राप्त करने के लिए सेट करना होगा, ताकि इसका उपयोग किसी स्क्रिप्ट लोडर द्वारा किया जा सके।

output: { 
    path: __dirname + '/lib', // path to output 
    filename: outputFile, // library file name 
    library: libraryName, // library name 
    libraryTarget: 'umd', // the umd format 
    umdNamedDefine: true // setting this to true will name the AMD module 
    }, 

एक बार आपके webpack उत्पादन बंडल तैयार (UMD मॉड्यूल) है, तो कोई भी उपयोगकर्ता अपने पुस्तकालय सूचकांक पृष्ठ में इंजेक्षन करने और अपने angular2 घटकों स्क्रिप्ट लोडर/मॉड्यूल सिस्टम वे उपयोग की परवाह किए बिना का उपयोग शुरू कर सकते हैं।

एक अच्छा उदाहरण here नहीं है और उन्होंने समझाया इस here

प्रश्न: हमारे पुस्तकालय के एक उपभोक्ता उनके कोणीय 2 आवेदन में इस UMD बंडल में शामिल हैं?

उत्तर: के बाद से अपने पुस्तकालय एक UMD मॉड्यूल होने जा रहा है, उपयोगकर्ता स्क्रिप्ट लोडर/मॉड्यूल प्रणाली है कि वे अपने आवेदन के साथ प्रयोग कर रहे हैं के आधार पर पुस्तकालय शामिल कर सकते हैं।

उदाहरण के लिए। वेनिला जे एस:

<script src="http://example.com/your_lib.js"></script> 
    <script> 
     // Your_Lib will be available and will attach itself 
     // to the global scope. 
     var html = Your_Lib.render(); 
    </script> 

RequireJS (एएमडी):

<script src="http://example.com/require.js"></script> 
    <script> requirejs config goes here </script> 
    <script> 
     define(['your_lib', function(Your_Lib) { 
      var html = Your_Lib.render(); 
     }]) 
    </script> 

SystemJS (CommonJS):

var map = { 
      '@angular': 'node_modules/@angular', 
      .... 
      'your_lib': 'example.com/your_lib.js' 
     }; 
     var config = { 
      defaultJSExtensions: true, 
      map: map, 
      packages: packages 
     }; 
     System.config(config); 

तो फिर तुम हमेशा की तरह अपने पुस्तकालय आयात कर सकते हैं।

Webpack:

Index.html

में webpack.config.js

{ 
    externals: { 
     // require("your_lib") is external and available 
     // on the global var Your_Lib 
     "your_lib": "Your_Lib" 
    } 
} 

और अपने पुस्तकालय वैश्विक क्षेत्र में Your_Lib के रूप में उपलब्ध हो जाएगा।