यह लेख वर्तमान में उपलब्ध उपकरणों को एक साथ लाने का प्रयास है और यह पता लगाता है कि क्या वेबपैक जैसे कलेक्टरों द्वारा प्रारंभिक संकलन के बिना रिएक्ट पर उत्पादन तैयार अनुप्रयोगों को बनाना संभव है या कम से कम इस तरह के संकलन को कम से कम करना है।

वर्णित सब कुछ बहुत प्रयोगात्मक है और मैंने स्थानों में जानबूझकर कोनों को काट दिया है। किसी भी मामले में मैं वास्तविक उत्पादन पर ऐसा कुछ करने की सलाह नहीं देता।

ECMAScript मॉड्यूल ( <script type="module"/> फॉर्म import Foo from './foo'; और import('./Foo') ) के साथ सीधे ब्राउज़र में उपयोग करने की क्षमता लंबे समय तक नई नहीं है, यह अच्छी तरह से समर्थित कार्यक्षमता है: https: //caniuse.com/#feat=es6-module

लेकिन वास्तव में, हम न केवल हमारे मॉड्यूल, बल्कि पुस्तकालयों को भी आयात करते हैं। इस विषय पर एक उत्कृष्ट लेख है: https://salomvary.com/es6-modules-in-browsers.html । और उल्लेख के लायक एक और समान रूप से अच्छा लेख https://github.com/stken2050/esm-bundlerless है ।

इन लेखों से अन्य महत्वपूर्ण बातों के अलावा, ये बिंदु एक प्रतिक्रिया एप्लिकेशन बनाने के लिए सबसे महत्वपूर्ण हैं:

पैकेज निर्दिष्ट आयात (या आयात नक्शे) के लिए समर्थन: जब हम import React from 'react' लिखते import React from 'react' वास्तव में हमें इस तरह से कुछ आयात करना चाहिए https://cdn.com/react/react.production.js
यूएमडी के लिए समर्थन: रिएक्ट को अभी भी यूएमडी के रूप में वितरित किया जाता है और फिलहाल लेखक अभी तक इस बात पर सहमत नहीं हुए हैं कि लाइब्रेरी को मॉड्यूल के रूप में कैसे वितरित किया जाए।
JSX
सीएसएस आयात

आइए बारी-बारी से सभी बिंदुओं पर जाएं।

परियोजना की संरचना

सबसे पहले, हम परियोजना की संरचना निर्धारित करेंगे:

node_modules स्पष्ट रूप से यह वह जगह है जहां पर निर्भरताएं डाली जाएंगी
index*.html और सेवा स्क्रिप्ट के साथ src निर्देशिका
- app सीधे रिएक्ट पर एप्लिकेशन कोड

पैकेज विनिर्देशक आयात का समर्थन करता है

import React from 'react'; से import React from 'react'; प्रतिक्रिया के माध्यम import React from 'react'; हमें ब्राउज़र को बताना होगा कि वास्तविक स्रोत की तलाश कहाँ करें, क्योंकि react एक वास्तविक फ़ाइल नहीं है, लेकिन एक पुस्तकालय के लिए एक सूचक है। इस https://github.com/guybedford/es-module-shims के लिए एक स्टब है।

चलो स्टब और रिएक्ट सेट करें:

 $ npm i es-module-shims react react-dom --save

हम फ़ाइल को public/index-dev.html से शुरू करेंगे:

 <!DOCTYPE html> <html> <body> <div id="root"></div> <script defer src="../node_modules/es-module-shims/dist/es-module-shims.js"></script> <script type="importmap-shim"> { "imports": { "react": "../node_modules/react/umd/react.development.js", "react-dom": "../node_modules/react-dom/umd/react-dom.development.js" } } </script> <script type="module-shim"> import './app/index.jsx'; </script> </body> </html>

जहाँ src/app/index.jsx कुछ इस तरह दिखता है:

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; (async () => { const {Button} = await import('./Button.jsx'); const root = document.getElementById('root'); ReactDOM.render(( <div> <Button>Direct</Button> </div> ), root); })();

और src/app/Button.jsx इस तरह:

 import React from 'react'; export const Button = ({children}) => <button>{children}</button>;

क्या यह काम करेगा? बिल्कुल नहीं। इस तथ्य के बावजूद कि जहां आवश्यक हो वहां से सब कुछ सफलतापूर्वक आयात किया जाता है।

चलिए अगली समस्या पर चलते हैं।

UMD समर्थन करते हैं

गतिशील तरीका

इस तथ्य के आधार पर कि रिएक्ट को यूएमडी के रूप में वितरित किया जाता है, इसे सीधे आयात नहीं किया जा सकता है, यहां तक कि स्टब के माध्यम से भी (यदि टिकट को मरम्मत के रूप में बंद किया गया था, तो आप कदम को छोड़ सकते हैं)। हमें किसी तरह स्रोत को पैच करने की आवश्यकता है ताकि यह संगत हो जाए।

उपरोक्त लेखों ने मुझे इसके लिए सेवा कार्यकर्ताओं का उपयोग करने के लिए प्रेरित किया, जो नेटवर्क अनुरोधों और प्रतिक्रियाओं को बाधित और संशोधित कर सकते हैं। चलिए मुख्य एंट्री पॉइंट src/index.js बनाते हैं, जहाँ हम SW और App को कॉन्फ़िगर करेंगे और एप्लिकेशन ( src/app/index.jsx ) को सीधे इनवॉइस करने के बजाय इसका उपयोग करेंगे:

 (async () => { try { const registration = await navigator.serviceWorker.register('sw.js'); await navigator.serviceWorker.ready; const launch = async () => import("./app/index.jsx"); //   SW       // https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#clientsclaim if (navigator.serviceWorker.controller) { await launch(); } else { navigator.serviceWorker.addEventListener('controllerchange', launch); } } catch (error) { console.error('Service worker registration failed', error); } })();

एक सेवा कार्यकर्ता बनाएँ ( src/sw.js ):

 //         //@see https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#clientsclaim self.addEventListener('activate', event => event.waitUntil(clients.claim())); const globalMap = { 'react': 'React', 'react-dom': 'ReactDOM' }; const getGlobalByUrl = (url) => Object.keys(globalMap).reduce((res, key) => { if (res) return res; if (matchUrl(url, key)) return globalMap[key]; return res; }, null); const matchUrl = (url, key) => url.includes(`/${key}/`); self.addEventListener('fetch', (event) => { const {request: {url}} = event; console.log('Req', url); const fileName = url.split('/').pop(); const ext = fileName.includes('.') ? url.split('.').pop() : ''; if (!ext && !url.endsWith('/')) { url = url + '.jsx'; } if (globalMap && Object.keys(globalMap).some(key => matchUrl(url, key))) { event.respondWith( fetch(url) .then(response => response.text()) .then(body => new Response(` const head = document.getElementsByTagName('head')[0]; const script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.appendChild(document.createTextNode( ${JSON.stringify(body)} )); head.appendChild(script); export default window.${getGlobalByUrl(url)}; `, { headers: new Headers({ 'Content-Type': 'application/javascript' }) }) ) ) } else if (url.endsWith('.js')) { // rewrite for import('./Panel') with no extension event.respondWith( fetch(url) .then(response => response.text()) .then(body => new Response( body, { headers: new Headers({ 'Content-Type': 'application/javascript' }) }) ) ) } });

जो किया गया है उसे संक्षेप में बताने के लिए:

हमने एक निर्यात मानचित्र बनाया है जो एक पैकेज नाम को एक वैश्विक चर के साथ जोड़ता है
UMD में लिपि गई सामग्री की सामग्री के साथ head में एक स्क्रिप्ट टैग बनाएं
डिफ़ॉल्ट निर्यात के रूप में वैश्विक चर निर्यात किया गया

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

अब कॉन्फ़िगरेशन स्क्रिप्ट का उपयोग करने के लिए src/index-dev.html बदलें:

 <!DOCTYPE html> <html> <body> <div id="root"></div> <script defer src="../node_modules/es-module-shims/dist/es-module-shims.js"></script> <script type="importmap-shim">...    </script> <!--  app/index.jsx  index.js --> <script type="module-shim" src="index.js"></script> </body> </html>

अब हम React और React DOM को इम्पोर्ट कर सकते हैं।

स्थैतिक पथ

यह ध्यान दिया जाना चाहिए कि एक और तरीका है। प्रतिक्रिया का एक अनौपचारिक ES निर्माण है:

 npm install esm-react --save

आयात मानचित्र इस तरह दिखेगा:

 { "imports": { "react": "../node_modules/esm-react/src/react.js", "react-dom": "../node_modules/esm-react/src/react-dom.js" } }

लेकिन दुर्भाग्य से परियोजना बहुत पीछे है, नवीनतम संस्करण 16.8.3 जबकि रिएक्ट पहले से ही 16.10.2 ।

JSX

JSX को संकलित करने के दो तरीके हैं। हम या तो कंसोल से पारंपरिक बैबेल को पूर्व-इकट्ठा कर सकते हैं, या इसे ब्राउज़र रनटाइम में किया जा सकता है। उत्पादन के लिए, पूर्व-संकलन बेहतर है, लेकिन विकास मोड में यह रनटाइम में संभव है। चूंकि हमारे पास पहले से ही एक सेवा कार्यकर्ता है, हम इसका उपयोग करेंगे।

बेबल के साथ एक विशेष पैकेज स्थापित करें:

 $ npm install @babel/standalone --save-dev

अब सेवा कार्यकर्ता ( src/sw.js ) के साथ निम्नलिखित जोड़ें:

 # src/sw.js //     importScripts('../node_modules/@babel/standalone/babel.js'); //     self.addEventListener('fetch', (event) => { //       } else if (url.endsWith('.jsx')) { event.respondWith( fetch(url) .then(response => response.text()) .then(body => new Response( //TODO  Babel.transform(body, { presets: [ 'react', ], plugins: [ 'syntax-dynamic-import' ], sourceMaps: true }).code, { headers: new Headers({ 'Content-Type': 'application/javascript' }) }) ) ) } });

यहां हमने नेटवर्क अनुरोधों को इंटरसेप्ट करने और उन्हें फिर से लिखने के साथ एक ही दृष्टिकोण का उपयोग किया, हमने बेबल का उपयोग मूल स्रोत कोड को बदलने के लिए किया। कृपया ध्यान दें कि डायनेमिक आयातों के लिए प्लगइन को syntax-dynamic-import कहा जाता है, न कि हमेशा की तरह @babel/plugin-syntax-dynamic-import क्योंकि यह एक स्टैंडअलोन संस्करण है।

सीएसएस

उल्लिखित लेख में, लेखक ने पाठ परिवर्तन का उपयोग किया है, हम पृष्ठ पर थोड़ा आगे जाएंगे और सीएसएस को एम्बेड करेंगे। ऐसा करने के लिए, हम फिर से सेवा कार्यकर्ता ( src/sw.js ) का उपयोग करेंगे:

 //     self.addEventListener('fetch', (event) => { //      +  } else if (url.endsWith('.css')) { event.respondWith( fetch(url) .then(response => response.text()) .then(body => new Response( ` const head = document.getElementsByTagName('head')[0]; const style = document.createElement('style'); style.setAttribute('type', 'text/css'); style.appendChild(document.createTextNode( ${JSON.stringify(body)} )); head.appendChild(style); export default null; `, { headers: new Headers({ 'Content-Type': 'application/javascript' }) }) ) ); } });

देखा! यदि हम अब एक ब्राउज़र में src/index-dev.html , तो हम बटन देखेंगे। सुनिश्चित करें कि आवश्यक सेवा कार्यकर्ता स्थापित है और किसी भी चीज़ के विरोध में नहीं है। यदि आपको यकीन नहीं है, तो बस मामले में, आप Dev Tools खोल सकते हैं, Application जा सकते हैं, वहां Service Workers , और सभी पंजीकृत श्रमिकों के लिए Unregister क्लिक कर सकते हैं और फिर पृष्ठ को पुनः लोड कर सकते हैं।

प्रोडक्शंस

उपरोक्त कोड विकास मोड में काम करता है, लेकिन स्वयं हम साइट उपयोगकर्ताओं को अपने ब्राउज़र में कोड संकलित करने के लिए मजबूर नहीं करना चाहते हैं, यह पूरी तरह से अव्यावहारिक है। चलो किसी प्रकार का न्यूनतर उत्पादन मोड बनाते हैं।

एक अलग src/index.html प्रविष्टि बिंदु बनाएँ:

 <!DOCTYPE html> <html> <body> <div id="root"></div> <script type="module" src="index.js"></script> </body> </html>

जैसा कि आप देख सकते हैं, यहां कोई स्टब्स नहीं हैं, हम पैकेज नामों के पुनर्लेखन के लिए एक और विधि का उपयोग करेंगे। चूँकि हमें importMap.json को फिर से संकलित करने के लिए बैबेल की आवश्यकता है, इसलिए हम इसका उपयोग importMap.json करने के लिए importMap.json बजाय पथ को importMap.json से importMap.json लिए करेंगे। आवश्यक पैकेज स्थापित करें:

 $ npm install @babel/cli @babel/core @babel/preset-react @babel/plugin-syntax-dynamic-import babel-plugin-module-resolver --save-dev

स्क्रिप्ट के साथ एक अनुभाग को package.json जोड़ें:

 { "scripts": { "start": "npm run build -- --watch", "build": "babel src/app --out-dir build/app --source-maps --copy-files" } }

.babelrc.js फ़ाइल जोड़ें:

 module.exports = { presets: [ '@babel/preset-react' ], plugins: [ '@babel/plugin-syntax-dynamic-import', [ 'babel-plugin-module-resolver', { alias: { 'react': './node_modules/react/umd/react.development.js', 'react-dom': './node_modules/react-dom/umd/react-dom.development.js' }, //       build resolvePath: (sourcePath, currentFile, opts) => resolvePath(sourcePath, currentFile, opts).replace('../../', '../') } ] ] } ', module.exports = { presets: [ '@babel/preset-react' ], plugins: [ '@babel/plugin-syntax-dynamic-import', [ 'babel-plugin-module-resolver', { alias: { 'react': './node_modules/react/umd/react.development.js', 'react-dom': './node_modules/react-dom/umd/react-dom.development.js' }, //       build resolvePath: (sourcePath, currentFile, opts) => resolvePath(sourcePath, currentFile, opts).replace('../../', '../') } ] ] }

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

सेवा कार्यकर्ता के लिए युद्ध मोड जोड़ें:

 // src/index.js if ('serviceWorker' in navigator) { (async () => { try { //   const production = !window.location.toString().includes('index-dev.html'); const config = { globalMap: { 'react': 'React', 'react-dom': 'ReactDOM' }, production }; const registration = await navigator.serviceWorker.register('sw.js?' + JSON.stringify(config)); await navigator.serviceWorker.ready; const launch = async () => { if (production) { await import("./app/index.js"); } else { await import("./app/index.jsx"); } }; // https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#clientsclaim if (navigator.serviceWorker.controller) { await launch(); } else { navigator.serviceWorker.addEventListener('controllerchange', launch); } } catch (error) { console.error('Service worker registration failed', error); } })(); } else { alert('Service Worker is not supported'); }

शर्तों को src/sw.js :

 // src/sw.js const {globalMap, production} = JSON.parse((decodeURIComponent(self.location.search) || '?{}').substr(1)); if (!production) importScripts('../node_modules/@babel/standalone/babel.js');

की जगह

 // src/sw.js if (!ext && !url.endsWith('/')) { url = url + '.jsx' with }

पर

 // src/sw.js if (!ext && !url.endsWith('/')) { url = url + '.' + (production ? 'js' : 'jsx'); }

चलो एक छोटा सा कंसोल स्क्रिप्ट build.sh बनाते हैं। एस (विंडोज वाले लोग छवि और समानता में विंडोज के लिए एक ही बना सकते हैं) जो आपको build निर्देशिका में आवश्यक सभी चीजें एकत्र करेगा:

 #  rm -rf build #   mkdir -p build/scripts mkdir -p build/node_modules #   cp -r ./node_modules/react ./build/node_modules/react cp -r ./node_modules/react-dom ./build/node_modules/react-dom #  ,      cp ./src/*.js ./build cp ./src/index.html ./build/index.html #  npm run build

हम इस तरह से चलते हैं ताकि node_modules निर्देशिका केवल निर्माण चरण और विकास मोड में आवश्यक निर्भरता से उत्पादन पर प्रफुल्लित न हो।

अंतिम रिपॉजिटरी: http://github.com/kirill-konshin/pure-react-with-dynamic-imports

यदि हम अब build/index.html खोलते हैं build/index.html तो हमें src/index-dev.html के समान आउटपुट दिखाई देगा build/index.html लेकिन इस बार ब्राउज़र कुछ भी एकत्र नहीं करेगा, यह पहले बैबल द्वारा संग्रहित फ़ाइलों का उपयोग करेगा।

जैसा कि आप देख सकते हैं, समाधान में दोहराव है: importMap.json , .babelrc.js फ़ाइल का alias अनुभाग और build.sh पर प्रतिलिपि करने के लिए फ़ाइलों की एक सूची। यह एक डेमो के लिए करेगा, लेकिन सामान्य तौर पर इसे किसी तरह से स्वचालित होना चाहिए।

विधानसभा यहां उपलब्ध है: https://kirill-konshin.imtqy.com/pure-react-with-dynamic-imports/index.html

निष्कर्ष

सामान्य तौर पर, एक पूरी तरह से व्यवहार्य उत्पाद प्राप्त किया गया था, हालांकि बहुत कच्चा।

HTTP2 को नेटवर्क पर भेजी जाने वाली छोटी फ़ाइलों के एक समूह का ध्यान रखना चाहिए।

रिपॉजिटरी जहां आप कोड देख सकते हैं

प्रतिक्रिया, JSX, वेब के बिना एक ब्राउज़र में ES मॉड्यूल का आयात (गतिशील सहित)