लारवेल 11 में जावास्क्रिप्ट को कैसे शामिल करें: सभी परिदृश्यों के लिए चरण-दर-चरण मार्गदर्शिका

लारवेल 11 में, आपके प्रोजेक्ट में जावास्क्रिप्ट जोड़ना आसान हो सकता है, डिफ़ॉल्ट एसेट बंडलर Vite को धन्यवाद। वैश्विक समावेशन से लेकर विशिष्ट दृश्यों में सशर्त लोडिंग तक, सभी प्रकार के परिदृश्यों के लिए अपनी जावास्क्रिप्ट कैसे सेट करें, यहां बताया गया है।

1. सभी फाइलों में जावास्क्रिप्ट शामिल करना

कई मामलों में, आप अपने लारवेल एप्लिकेशन में वैश्विक स्तर पर जावास्क्रिप्ट को शामिल करना चाह सकते हैं। सार्वभौमिक समावेशन के लिए जावास्क्रिप्ट को व्यवस्थित और बंडल करने का तरीका यहां बताया गया है।

चरण 1: अपनी जावास्क्रिप्ट फ़ाइल रखें

1. स्थान: जावास्क्रिप्ट फ़ाइलों को संसाधन/जेएस निर्देशिका में संग्रहीत करें। उदाहरण के लिए, यदि आपकी फ़ाइल का नाम Custom.js है, तो इसे resource/js/custom.js के रूप में सहेजें।
2. व्यवस्थित करें: कई जावास्क्रिप्ट फ़ाइलों के साथ जटिल परियोजनाओं के लिए, आप उन्हें संसाधनों/जेएस में उपनिर्देशिकाओं के भीतर व्यवस्थित कर सकते हैं, जैसे कि संसाधन/जेएस/मॉड्यूल/कस्टम.जेएस।

चरण 2: जावास्क्रिप्ट को वाइट के साथ संकलित करें

लारवेल 11 संपत्तियों के प्रबंधन के लिए Vite का उपयोग करता है। अपनी जावास्क्रिप्ट को बंडल करने के लिए इसे कॉन्फ़िगर करने के लिए:

1. app.js में शामिल करें: resource/js/app.js खोलें और अपनी कस्टम फ़ाइल आयात करें:

   import './custom.js';

1. दृश्यों में प्रत्यक्ष आयात: वैकल्पिक रूप से, यदि आप केवल कुछ दृश्यों में जावास्क्रिप्ट चाहते हैं, तो आप ब्लेड टेम्पलेट में @vite निर्देश का उपयोग कर सकते हैं:

   @vite('resources/js/custom.js')

चरण 3: vite.config.js कॉन्फ़िगर करें

सुनिश्चित करें कि vite.config.js @vite आयात को सही ढंग से संभालने के लिए सेट है। डिफ़ॉल्ट रूप से, इसे कुछ इस तरह दिखना चाहिए:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

चरण 4: वाइट चलाएँ

Vite के साथ अपनी संपत्ति संकलित करने के लिए:

• विकास के लिए: npm run dev चलाएँ
• उत्पादन के लिए: एनपीएम रन बिल्ड चलाएँ

चरण 5: जावास्क्रिप्ट को ब्लेड टेम्प्लेट में लोड करें

अपने टेम्प्लेट में जावास्क्रिप्ट फ़ाइलें शामिल करने के लिए, @vite निर्देश का उपयोग करें:

    
    @vite('resources/js/app.js')


    

सारांश

• संसाधनों/जेएस में जावास्क्रिप्ट फ़ाइलें संग्रहीत करें।
• वैश्विक समावेशन के लिए ऐप.जेएस में आयात करें या आवश्यकतानुसार सीधे ब्लेड टेम्पलेट्स में शामिल करें।
• Vite का उपयोग करके संपत्तियों को संकलित करें।
• जावास्क्रिप्ट लोड करने के लिए ब्लेड टेम्प्लेट में @vite का उपयोग करें।

इस सेटअप के साथ, जावास्क्रिप्ट लारवेल 11 प्रोजेक्ट में साइट-व्यापी उपलब्ध होगी।

2. ब्लेड रेंडरिंग ऑर्डर को समझना

विशिष्ट दृश्यों में जावास्क्रिप्ट को सशर्त रूप से शामिल करते समय, ब्लेड टेम्पलेट्स को प्रस्तुत करने के क्रम को समझना आवश्यक है।

लारवेल में, लेआउट को पहले संसाधित किया जाता है, उसके बाद व्यक्तिगत दृश्य और आंशिक। यहां प्रतिपादन प्रक्रिया है:

1. लेआउट को पहले प्रस्तुत किया गया है, जिसमें सामग्री इंजेक्शन के लिए प्लेसहोल्डर (@yield और @section) बनाए गए हैं।
2. बच्चे के दृश्य या आंशिक भाग को आगे संसाधित किया जाता है, उनकी सामग्री को लेआउट प्लेसहोल्डर्स में डाला जाता है।

इस आदेश के कारण, यदि आप चाइल्ड व्यू सामग्री के आधार पर लेआउट में सशर्त रूप से जावास्क्रिप्ट फ़ाइलें जोड़ना चाहते हैं, तो मानक चर जांच काम नहीं करेगी। आपको पृष्ठ-विशिष्ट जावास्क्रिप्ट के अधिक लचीले संचालन के लिए ब्लेड के @stack और @push निर्देशों का उपयोग करने की आवश्यकता होगी।

3. स्टैक और पुश का उपयोग करके विशिष्ट दृश्यों में जावास्क्रिप्ट को सशर्त रूप से शामिल करना

विशिष्ट दृश्यों में जावास्क्रिप्ट जोड़ने के लिए, लारवेल के @stack और @push निर्देश एक कुशल समाधान प्रदान करते हैं, जिससे आप सशर्त रूप से लेआउट में स्क्रिप्ट शामिल कर सकते हैं।

चरण 1: अपने लेआउट में एक स्टैक परिभाषित करें

अपने लेआउट में, पेज-विशिष्ट स्क्रिप्ट के लिए एक स्टैक बनाएं:

    
    @vite('resources/js/app.js')
    @stack('scripts') 


    @yield('content')

चरण 2: चाइल्ड व्यू से स्क्रिप्ट पुश करें

विशिष्ट ब्लेड फ़ाइल में जिसे जावास्क्रिप्ट की आवश्यकता है, स्क्रिप्ट स्टैक पर पुश करें:

@extends('layout')

@section('content')
    
@endsection

@push('scripts')
    @vite('resources/js/custom.js')
@endpush

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

@पुश कहां घोषित करें?

ब्लेड व्यू में @पुश स्टेटमेंट का स्थान मुख्य रूप से पठनीयता और निष्पादन के क्रम के लिए मायने रखता है। यहां @push का प्रभावी ढंग से उपयोग करने का तरीका बताया गया है:

1. व्यू में प्लेसमेंट: जबकि आप @push को ब्लेड व्यू में कहीं भी रख सकते हैं, इसे फ़ाइल के अंत में रखना सबसे अच्छा अभ्यास है, आमतौर पर @सेक्शन सामग्री के बाद। यह स्क्रिप्ट-संबंधित कोड को मुख्य सामग्री से अलग रखता है, जिससे पठनीयता और रखरखाव में सुधार होता है।

   @extends('layout')

   @section('content')
       
   @endsection

   @push('scripts')
       @vite('resources/js/custom.js')
   @endpush

1. एकाधिक @push कथनों का क्रम: यदि आपके पास एक ही स्टैक के लिए एकाधिक @push घोषणाएं हैं (उदाहरण के लिए, @push('scripts')), तो उन्हें दृश्य में दिखाई देने वाले क्रम में जोड़ा जाएगा। उदाहरण के लिए:

   @push('scripts')
       
   @endpush

   @push('scripts')
       
   @endpush

इस मामले में, स्क्रिप्ट1.जेएस स्क्रिप्ट2.जेएस से पहले लोड होगा क्योंकि @पुश घोषित क्रम में स्टैक में सामग्री जोड़ता है।

1. आंशिक और घटकों में @push का उपयोग करना: @push का उपयोग ब्लेड आंशिक (उदाहरण के लिए, @include) या ब्लेड घटकों में भी किया जा सकता है। यह दृश्य-विशिष्ट स्क्रिप्ट या शैलियों को सीधे पुन: प्रयोज्य घटकों में शामिल करने के लिए उपयोगी है, जिससे निर्भरता को प्रबंधित करना आसान हो जाता है।

   
   

       
   

   @push('scripts')
       @vite('resources/js/partial-specific.js')
   @endpush

जब इस आंशिक को एक दृश्य में शामिल किया जाता है, तो आंशिक-विशिष्ट.जेएस को लेआउट फ़ाइल में स्क्रिप्ट स्टैक में जोड़ा जाएगा।

1. @prepend के साथ ऑर्डर को नियंत्रित करें: यदि विशिष्ट स्क्रिप्ट को उसी स्टैक में दूसरों से पहले लोड करने की आवश्यकता है, तो आप @push के बजाय @prepend का उपयोग कर सकते हैं। @prepend सामग्री को स्टैक की शुरुआत में रखता है, जिससे लोड ऑर्डर पर अधिक नियंत्रण मिलता है।

   @prepend('scripts')
       
   @endprepend

   @push('scripts')
       
   @endpush

यहां, क्रिटिकल.जेएस नॉन_क्रिटिकल.जेएस से पहले लोड होंगे, भले ही ब्लेड फ़ाइल में उनका स्थान कुछ भी हो।

चाबी छीनना

• स्पष्टता और रखरखाव के लिए विचारों के अंत में @push लगाएं।
• ऑर्डर दृश्य के भीतर प्लेसमेंट द्वारा निर्धारित किया जाता है, पहले @push स्टेटमेंट पहले लोड होते हैं।
• @पुश आंशिक और घटकों में काम करता है, जिससे दृश्य-विशिष्ट निर्भरताओं को शामिल करना आसान हो जाता है।
• उन स्क्रिप्ट के लिए @prepend का उपयोग करें जिन्हें पहले लोड करने की आवश्यकता है एक ही स्टैक में।

4. वैकल्पिक: लेआउट में इनलाइन कंडीशनल स्टेटमेंट का उपयोग करना

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

रूट के आधार पर सशर्त रूप से शामिल करें

वर्तमान रूट के आधार पर जावास्क्रिप्ट को शामिल करने के लिए आप सीधे लेआउट में रूट चेक का उपयोग कर सकते हैं:

@if (request()->routeIs('some.route.name'))
    @vite('resources/js/custom.js')
@endif

एक चर के आधार पर सशर्त रूप से शामिल करें

वैरिएबल के आधार पर स्क्रिप्ट को सशर्त रूप से लोड करने के लिए, आप कंट्रोलर या चाइल्ड व्यू में एक ध्वज सेट कर सकते हैं, फिर लेआउट में इसकी जांच कर सकते हैं:

1. आपके नियंत्रक में:

   return view('your.view', ['loadCustomJS' => true]);

1. लेआउट में:

   @if (!empty($loadCustomJS))
       @vite('resources/js/custom.js')
   @endif

यह दृष्टिकोण आपको विशिष्ट चर या मार्गों के आधार पर जावास्क्रिप्ट लोडिंग को नियंत्रित करने की अनुमति देता है, जो कस्टम पेज सेटअप के लिए लचीलापन प्रदान करता है।

सारांश

यहां चर्चा की गई विधियों का एक त्वरित अवलोकन दिया गया है:

• वैश्विक समावेशन: जावास्क्रिप्ट को ऐप.जेएस में रखें और @vite का उपयोग करके इसे विश्व स्तर पर शामिल करें।
• स्टैक और पुश के साथ सशर्त समावेशन: लचीली, मॉड्यूलर स्क्रिप्ट हैंडलिंग के लिए @stack और @push निर्देशों का उपयोग करें, जो सुनिश्चित करता है कि स्क्रिप्ट केवल उन दृश्यों में लोड की जाती हैं जहां उनकी आवश्यकता होती है।
• लेआउट में सशर्त विवरण: सीधे लेआउट में जावास्क्रिप्ट को सशर्त रूप से लोड करने के लिए रूट-आधारित चेक या नियंत्रक चर का उपयोग करें।

ये विकल्प आपको जावास्क्रिप्ट लोडिंग को सटीक रूप से नियंत्रित करने की अनुमति देते हैं, जिससे आपका लारवेल 11 प्रोजेक्ट कुशल और रखरखाव योग्य हो जाता है।