परोक्ष रूप से संदर्भ दूरस्थ जावास्क्रिप्ट यूआरएल

Question

हम कोणीय 4/टाइपप्रति और NPM साथ रोलअप उपयोग करना चाहते हैं हम हमारी कंपनी के भीतर निम्नलिखित की आवश्यकता:

• कुछ टीमों जे एस पुस्तकालयों जो (केंद्रीकृत करने की आवश्यकता है एक CDN की तरह बनाने के)
• इन पुस्तकालयों एक दूरस्थ यूआरएल के पीछे हैं और आवेदन के भीतर स्थानीय स्तर पर मौजूद नहीं होना चाहिए (कारण यह है कि उन पुस्तकालयों भी अक्सर बदल)
• पुस्तकालय (अनुप्रयोग) के उपभोक्ता लाइब्रेरी का उपयोग करने के लिए एक NPM पैकेज को स्थापित करता है
• स्थानीय स्तर पर स्थापित NPM पैकेज एक जावास्क्रिप्ट मुखौटा फ़ाइल या बंडल जो एक दूरस्थ यूआरएल
• NPM पैकेज भी एक टाइपप्रति परिभाषा फ़ाइल के पीछे मौजूदा जे एस पुस्तकालय के लिए एक दूरस्थ लिंक डालता शामिल
• लक्ष्य है कि उपभोक्ता नहीं करता 'है टी एक यूआरएल के साथ एक स्क्रिप्ट टैग जोड़ना होगा
• स्थानीय स्तर पर स्थापित जावास्क्रिप्ट फ़ाइल आवेदन कोड के साथ एक साथ बंडल किया जा सकता है
• पुस्तकालय का नया संस्करण पीछे की ओर यदि संभव हो तो संगत होगा (वह इस के बारे में पता नहीं होना चाहिए)

टाइपस्क्रिप्ट/जावास्क्रिप्ट/एनपीएम/रोलअप का उपयोग करके इसे हासिल करने का सबसे अच्छा तरीका क्या है? हम आमजेएस वाक्यविन्यास में पारित ES2015 वाक्यविन्यास का उपयोग करेंगे।

Answer 1

समाधान बहुत जटिल है। उन जेएस पुस्तकालयों को बनाने वाली टीमों को एक यूआरएल के पीछे एक बंडल डालना चाहिए। टीमों को उस यूआरएल को रखना चाहिए और उन बंडलों पर ईटैग कैशिंग सक्षम होना चाहिए ताकि उपयोगकर्ताओं के पास हमेशा नवीनतम संस्करण हो। यदि बंडल का एक नया संस्करण तैनात किया गया है तो http/1 क्लाइंट को स्वचालित रूप से बंडल को फिर से लोड करना होगा।

उपयोगकर्ताओं को स्वयं को यूआरएल रखना होगा या जेसन फाइलों के साथ एक तंत्र स्थापित किया जा सकता है जहां जानकारी जेसन फाइलों (एक मैनिफेस्ट की तरह) में रहती है।

एप्लिकेशन के डेवलपर फ्रेमिंग लाइब्रेरी की सभी टाइपिंग वाले एनपीएम के माध्यम से एक डी.एस. फाइल प्राप्त कर सकते हैं। आपको मॉड्यूल आयात करने की आवश्यकता नहीं होगी क्योंकि यह एक दूरस्थ यूआरएल है। इसलिए आपको कुछ भी आयात करने की आवश्यकता नहीं है क्योंकि इसकी गारंटी है कि लाइब्रेरी को स्क्रिप्ट टैग के कारण संदर्भित किया गया है।

Answer 2

मुझे नहीं लगता कि रोलअप में webpack dll plugin जैसा कुछ है, इसलिए, मेरा उत्तर असंबंधित दिखाई दे सकता है लेकिन मुझे लगता है कि आप इसे एक अच्छे प्रारंभिक बिंदु के रूप में मान सकते हैं और रोलअप में समान कुछ ढूंढना शुरू कर सकते हैं।

एक CDN में एक पुस्तकालय में रहने वाले:

1. अपनी इसी DLL Reference वास्तव में वर्णन करता है जो कैसे निर्यात मॉड्यूल की आवश्यकता के लिए के साथ एक DLL बनाएँ।
2. एक आत्म-व्याख्यात्मक पथ का उपयोग करें और इसे https://cdn.mydomain.com/<libraryName>/<version>/<libraryName>.{js,json,d.ts} जैसे संगत रखें (अनुरोधकर्ता को ?<cacheBustingUID> क्लाइंट कैशिंग समस्याओं से बचने के लिए जोड़ना चाहिए)।(https://cdn.mydomain.com/foo/1.0.0/foo.{js,json,d.ts}, और https://cdn.mydomain.com/foo/latest/foo.{js,json,d.ts}): सामान्य संस्करण के अलावा, मैं भी आप version क्षेत्र के लिए एक कीवर्ड latest उपयोग करने के लिए, यह एक always true path जो बंडल के नवीनतम संस्करण के लिए अंक प्राप्त करने के लिए सुझाव देते हैं।
3. सभी फाइलों का समाधान करें और देव सर्वर प्रारंभ (ध्यान रखें कि webpack एक config के रूप में एक वादा वापस जाने के लिए अनुमति देता है)

module.exports = env => { 
    const libs = ((name, version, exts) => (
    exts.map(ext => `https://cdn.mydomain.com/${name}/${version}/${name}.${ext}`) 
))('foo', 'latest', ['js', 'd.ts', 'json']) 

    return Promise 
    .all(libs.map(fetch)) 
    .then([library, definitions, DLLReference] => { 
     // what to do? 
     // you can also inject the dynamic paths through `webpackDefinePlugin` 
    }) 
}