Vue 3 वेब विकास की दुनिया में कर्षण प्राप्त करना जारी रखता है। डेटा रिएक्टिविटी के अपने आधुनिक दृष्टिकोण के साथ, घटकों के व्यवहार की रचना, और कई अन्य विशेषताएं, Vue 3 पर इस तरह का ध्यान होना चाहिए। Vue का एकमात्र पहलू जिसे थोड़ी मदद की जरूरत है, वह है एंटरप्राइज वर्कस्पेस टूलिंग। यहीं पर Nrwl का मोनोरेपो टूल, Nx, आ सकता है और किसी भी Vue वातावरण को सुपरचार्ज कर सकता है!

एनएक्स में मोनोरेपो की शक्ति

जब स्रोत कोड की बात आती है, तो "मोनोरेपो" का लाभ उठाना भी सॉफ्टवेयर पारिस्थितिकी तंत्र में एक बढ़ती हुई प्रवृत्ति रही है। एक ऐसी दुनिया की कल्पना करें जहां कोड साझा करने के लिए पाइपलाइन बनाने/तैनात करने की कोई आवश्यकता नहीं है। पुन: उपयोग कोड में प्रवेश की बाधा बहुत छोटी हो जाती है। साझाकरण कोड को आसान बनाने की आशा उत्पादन के तेज़ पथ को अनलॉक करती है। अन्य कारणों की कोई कमी नहीं है कि क्यों एक मोनोरेपो रणनीति आकर्षक है, और यह देखने के लिए कि यह आपकी आवश्यकताओं के अनुरूप है या नहीं, उन्हें एक्सप्लोर करना सबसे अच्छा है।

यह कहना नहीं है कि मोनोरेपो एक स्वतंत्र जीत है, क्योंकि समस्याएं और अक्षमताएं उत्पन्न हो सकती हैं। एक मजबूत, युद्ध-परीक्षित टूल उन समस्याओं को हल करने में मदद करता है, और Nx वह टूल है ।

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

Vite के साथ शुरुआत करना

यह आलेख Vite का उपयोग करके Nx मोनोरेपो में Vue 3 ऐप पर केंद्रित है । आम तौर पर, Vue CLI के बहिष्कृत होने के कारण Vite में माइग्रेट करना सबसे अच्छा होता है ।

VueSchool के पास Vite में माइग्रेट करने के लिए एक शानदार लेख है ; इसकी जांच - पड़ताल करें! एक त्वरित टिप के रूप में: वेबपैक से Vite में माइग्रेशन का सबसे कठिन हिस्सा हो सकता है कि Vite- संगत निर्भरताओं को खोजना या मौजूदा तृतीय-पक्ष निर्भरताओं का समर्थन करने के लिए सही Vite प्लगइन कॉन्फ़िगरेशन का पता लगाना।

एक और बात: Nx वर्जन 16 ने नए स्कोप्ड पैकेज ( @nx/) पेश किए। यह मौजूदा प्लगइन्स के लिए एक बड़ा बदलाव है, इसलिए हम नवीनतम 15 संस्करण पर ध्यान केंद्रित करेंगे। परिवर्तन लागू होने पर इस लेख में अपडेट होंगे।

कुंजी Vue प्लगइन्स विचार करने योग्य हैं

Nx बहुत सारे फ्रंटएंड और बैकएंड फ्रेमवर्क के लिए प्रथम-पक्ष समर्थन प्रदान करता है। हालाँकि, वे आधिकारिक तौर पर अभी तक Vue का समर्थन नहीं करते हैं। सौभाग्य से, Vue के पास एक मजबूत खुला-स्रोत समुदाय है जिसने पहले ही Nx समर्थन विकसित कर लिया है!

लेखन के समय, जांच के लायक दो प्लगइन्स हैं: nx-vue3-viteऔर @nxext/vue। किसी भी प्लगइन का उपयोग करने के कुछ फायदे और नुकसान हैं। दोनों का सक्रिय समर्थन है। वे दोनों एप्लिकेशन और लाइब्रेरी प्रोजेक्ट कोड जनरेशन प्रदान करते हैं। उन दोनों का अपना Vite निष्पादक है, लेकिन सक्रिय रूप से Nx के प्रथम-पक्ष निष्पादक के पास जा रहे हैं। मतभेद हैं:

• @nxext/vueइस लेख को लिखने के समय उत्पादन तैयार नहीं है। इसे उत्पादन के लिए तैयार करने के लिए, इस प्लगइन के आस-पास का समुदाय यह सुनिश्चित करना चाहता है कि जेनरेटर कुछ बुनियादी स्तर की जरूरतों को पूरा करें और एनएक्स के वाइट निष्पादक के साथ परियोजनाएं उत्पन्न हों।
• nx-vue3-viteएप्लिकेशन कोड जनरेशन के प्रति एक दृढ़ विचार वाला दृष्टिकोण है। एप्लिकेशन प्रोजेक्ट बनाने के हिस्से के रूप में यह प्लगइन Vuex और Cypress सेटअप उत्पन्न करता है। अगर इन निर्भरताओं का उपयोग करने की योजना थी तो यह एक बड़ी बात नहीं हो सकती है।

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

ये प्लगइन्स किसी भी प्रोजेक्ट के लिए बॉल रोलिंग करेंगे।

एनएक्स मोनोरेपो और वीयू: ब्रिंगिंग योर ऐप टू लाइफ, स्टेप बाय स्टेप

हम एक नए Nx कार्यक्षेत्र से काम करने जा रहे हैं, एक Vue एप्लिकेशन बनाएं, प्रोजेक्ट को उपयोग करने के लिए कॉन्फ़िगर करें @nx/vite, और अंत में एक मौजूदा प्रोजेक्ट को नए बनाए गए एप्लिकेशन में कॉपी करें। चरणों को एनएक्स डॉक्स में संदर्भित किया गया है ।

कार्यक्षेत्र बनाएँ

प्रारंभ करने के लिए, निम्न आदेश के साथ एक रिक्त कार्यक्षेत्र बनाएँ:

npx create-nx-workspace@15

एक बार जब Nx प्रारंभिक कार्यक्षेत्र की स्थापना समाप्त कर लेता है, तो nx-vue3-vite, @nrwl/jest@15, स्थापित करें @nrwl/vite@15। जैसा कि @nxext/vueअभी उत्पादन तैयार नहीं है, हम पर ध्यान केंद्रित करने जा रहे हैं nx-vue3-vite।

npm install -D nx-vue3-vite @nrwl/jest@15 @nrwl/vite@15

ऐप बनाना काफी आसान है। संकल्पनात्मक रूप से, आप उस फ़ंक्शन को निष्पादित करते हैं जिसे आप कोड उत्पन्न करने के लिए उपयोग करना चाहते हैं, Nx में हम इसे जनरेटर कहते हैं। vue3-viteहम से बुलाए गए जनरेटर का उपयोग करने जा रहे हैं nx-vue3-vite। निम्न आदेश के साथ जेनरेटर निष्पादित करें:

npx nx generate nx-vue3-vite:vue3-vite {{nameOfApp}}

भविष्य के संदर्भ के लिए, जब भी आप कोड उत्पन्न करते हैं, एनएक्स संकेत प्रस्तुत कर सकता है। यह आपके द्वारा उपयोग किए जा रहे जनरेटर पर निर्भर है। मामले में vue3-vite, आवेदन का नाम प्रदान करके सभी आवश्यक विकल्प पूरे किए जाते हैं।

इस बिंदु पर, यह मानते हुए कि आपके पास मौजूदा Vue एप्लिकेशन नहीं है, आप अपना Vue ऐप बनाना शुरू करने के लिए तैयार हैं!

एनएक्स के वाइट कार्यान्वयन का प्रयोग करें

Nx के आधिकारिक Vite निष्पादक के पास जाना आसान है। अपनी ऐप निर्देशिका में खोलें project.jsonऔर निम्न खोजें:

"build": {
      "executor": "nx-vue3-vite:build-app",
      "options": {
        "dist": "dist/packages/{{nameOfApp}}"
      }
    },

"build": {
      "executor": "@nrwl/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/packages/{{nameOfApp}}"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    },

करने के लिए अन्य परिवर्तन निम्न के साथ serveसभी को प्रतिस्थापित करना है:serve

"serve": {
      "executor": "@nrwl/vite:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "{{nameOfApp}}:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "{{nameOfApp}}:build:development",
          "hmr": true
        },
        "production": {
          "buildTarget": "{{nameOfApp}}:build:production",
          "hmr": false
        }
      }
    },

अब यह एप्लिकेशन उपयोग कर रहा है @nrwl/vite!

एप्लिकेशन को बदलें

यह हिस्सा काफी सरल है, खासकर जब से आपका आवेदन पहले से ही Vite पर है। अब आपको केवल अपने मौजूदा ऐप को इस नई निर्देशिका में मर्ज करना है और package.jsonअपनी निर्भरताओं के साथ अपडेट करना है। आपकी परियोजना के आधार पर, आपको project.jsonसत्य का प्रतिनिधित्व करने के लिए पथ संदर्भों को अद्यतन करने की आवश्यकता हो सकती है। यह पूरी तरह से आपके आवेदन पर आधारित है।

किस बारे में @nxext/vue?

@nxext/vueसेट अप करने के लिए अधिकांश समान चरण साझा करता है (निर्भरता स्थापित करें, ऐप जेनरेट करें, Nx के Vite कार्यान्वयन पर स्विच करें, और मौजूदा ऐप को कॉपी करें) बस आप @nxext/vue. प्लगइन में भविष्य में सुधार के लिए आपको इसे अपडेट करने की आवश्यकता नहीं हो सकती है project.jsonक्योंकि यह पहले से ही उपयोग कर रहा है @nrwl/vite।

निष्कर्ष

एनएक्स के पास एक मजबूत वास्तुकला है जिसे केवल नए उपकरणों का उपयोग करने के तरीके के बारे में बताया जाना चाहिए। Nx मोनोरेपो में Vue को प्रयोग करने योग्य और एक्स्टेंसिबल बनाना दर्शाता है। यह आसान हो गया है क्योंकि Vite एक प्रथम-पक्ष प्लगइन है। जैसे-जैसे Vue अधिक लोकप्रिय होता जाएगा, एप्लिकेशन और लाइब्रेरी बनाना आसान बनाने के लिए अधिक मजबूत प्लगइन्स उपलब्ध होंगे।

यह मुझे आश्चर्यचकित करता है: इस मोनोरेपो में अब कौन से अन्य ढांचे को कॉन्फ़िगर किया जा सकता है?

शायद अगली बार हमें AngularJS को आजमाना चाहिए।

हीरोदेव्स के बारे में

HeroDevs एक सॉफ्टवेयर इंजीनियरिंग और कंसल्टिंग स्टूडियो है जो फ्रंट-एंड डेवलपमेंट में माहिर है। हमारी टीम ने Angular CLI, Angular Universal, Scully, XLTS जैसी परियोजनाओं का लेखन या सह-लेखन किया है - AngularJS, Vue2, Protractor, और कई अन्य के लिए विस्तारित दीर्घकालिक समर्थन। हम तेजी से बढ़ते स्टार्टअप्स और दुनिया की कुछ सबसे बड़ी कंपनियों जैसे Google, GE, Capital One, Experian, T-Mobile, Corteva, और अन्य के साथ काम करते हैं। Herodevs.com पर हमारे बारे में और जानें।