JavaScript SourceTrail

html-webpack-plugin အကြောင်း အလွန်ရှည်လျားသော ဆောင်းပါးကို ရေးသားရာတွင် နည်းပညာဆိုင်ရာ အချက်အလက် အနည်းငယ် ပါဝင်သော်လည်း အဆင့်ဆင့် ခွဲခြမ်းစိတ်ဖြာနိုင်ရန် အကောင်းဆုံး လုပ်ဆောင်ပါမည်။

HTML webpack plugin သည် သင်၏ webpack အစုအဝေးများကို ဝန်ဆောင်မှုပေးရန်အတွက် HTML ဖိုင်များဖန်တီးခြင်းကို ရိုးရှင်းစေသည်။ ၎င်းသည် စုစည်းမှုတိုင်းကို ပြောင်းလဲပေးသည့် ဖိုင်အမည်တွင် hash ပါ၀င်သည့် webpack အစုအဝေးများအတွက် အထူးသဖြင့် အသုံးဝင်သည်။ ပလပ်အင်သည် သင့်အတွက် HTML ဖိုင်တစ်ခု ဖန်တီးနိုင်စေကာ၊ သင့်အတွက် ဟက်ခ်များကို ပေါင်းစပ်ပေးပြီး အမြတ်အစွန်းကို ပေးနိုင်သည်။

အခု HTML webpack plugin ကိုအသုံးပြုတဲ့အခါ သင်ကြုံတွေ့ရတတ်တဲ့ ပြဿနာတစ်ခုရဲ့ အဖြေကို ကြည့်ရအောင်။

ဘုံပြProbleနာ

HTML ၏ကိုယ်ထည် သို့မဟုတ် ခေါင်းထဲသို့ Script များကို ထည့်သွင်းလိုသည်ဆိုပါစို့။ ၎င်းတွင် ပုံသေအားဖြင့် အပိုင်းအားလုံးပါဝင်သည် - ကျွန်ုပ်တို့လိုချင်သည့်အရာမဟုတ်ပါ။

ပြဿနာဖြေရှင်းချက်

ဤသည်မှာ ဆေးထိုးရန်အတွက် ဦးခေါင်းနှင့် ခန္ဓာကိုယ်တဂ်များကိုသာ အသုံးပြုနိုင်သည့် အခြေခံလွဲမှားမှုတစ်ခုဖြစ်သည်။ HTML webpack plugin configuration တွင် inject option ကို သတ်မှတ်ခြင်းဖြင့် ကျွန်ုပ်တို့တွင် ရွေးချယ်စရာများ ပိုမိုရရှိနိုင်ပါသည်။

ယခု ပိုမိုလက်တွေ့ကျသောပုံစံဖြင့် ၎င်းကိုသရုပ်ဖော်ရန်အတွက် JavaScript ကုဒ်အချို့ကို စူးစမ်းလေ့လာကြည့်ကြပါစို့။

new HtmlWebpackPlugin({
  inject: 'body',
  
  // Other configurations...
})

ဒါက လုပ်နည်းတစ်ခုပါ။ ဇာတ်ညွှန်းကို ခေါင်းထဲသို့ သွင်းနိုင်သည်။

new HtmlWebpackPlugin({
  inject: 'head',
  
  // Other configurations...
})

Code ၏ အဆင့်ဆင့် ရှင်းလင်းချက်

1. 'ထိုးသွင်း: ခန္ဓာကိုယ်' ဤကိစ္စတွင် ကျွန်ုပ်တို့သည် ၎င်းတို့ကို စတင်အသုံးပြုလိုသောအခါတွင် ဖိုင်အားလုံးကို တင်ထားကြောင်း သေချာစေရန်အတွက် ထုတ်လုပ်ထားသော js ဖိုင်များကို body tag ၏အောက်ခြေတွင် ထည့်သွင်းပါသည်။
2. 'ခေါင်းထိုး' ဆိုလိုသည်မှာ script ကို HTML ၏ ခေါင်းတွင် ထားရှိမည်ဖြစ်သည်။

အခြားကိစ္စများတွင်၊ ဤရွေးချယ်မှုများသည် မလုံလောက်နိုင်ပါ။ ဥပမာအားဖြင့်၊ ကျွန်ုပ်တို့တွင် ဝင်ခွင့်အမှတ်များစွာရှိပြီး မတူညီသောနေရာများတွင် မတူညီသော script များကို နေရာချလိုပါက၊

စာကြည့်တိုက်များ သို့မဟုတ် လုပ်ငန်းဆောင်တာများ ပါဝင်ပါသည်။

ဆက်ဖတ်ရန်

ဟုတ်ပါတယ်၊ စလိုက်ကြရအောင်။

Express.js သို့မဟုတ် ရိုးရိုးရှင်းရှင်း Express သည် Node.js အတွက် ဝဘ်အက်ပလီကေးရှင်းဘောင်တစ်ခုဖြစ်ပြီး MIT လိုင်စင်အောက်တွင် အခမဲ့နှင့် open-source ဆော့ဖ်ဝဲအဖြစ် ထုတ်ပြန်သည်။ ၎င်းသည် ဝဘ်အက်ပလီကေးရှင်းများနှင့် API များကို တည်ဆောက်ရန်အတွက် ဒီဇိုင်းထုတ်ထားသည်။ ၎င်းသည် Node.js အတွက် စံဆာဗာဘောင်ဖြစ်သည်။

Express သည် Node.js ၏အင်္ဂါရပ်အစုံကို ဖုံးကွယ်မထားသော်လည်း ၎င်းကို ရိုးရှင်းစေပြီး ၎င်း၏စွမ်းဆောင်ရည်ကို ပိုမိုကောင်းမွန်စေသည်။ ဝဘ်နှင့် မိုဘိုင်းအက်ပ်လီကေးရှင်းများအတွက် ခိုင်မာသောအင်္ဂါရပ်အစုံကို ပေးဆောင်သည်။ HTTP အသုံးဝင်မှုနည်းလမ်းများနှင့် အလယ်အလတ်ဆော့ဖ်ဝဲများစွာဖြင့် သင့်အနေဖြင့် ခိုင်မာသော API ဖန်တီးခြင်းသည် မြန်ဆန်လွယ်ကူပါသည်။

ဆက်ဖတ်ရန်

အသုံးမပြုသော npm module များကိုရှာဖွေခြင်းသည် JavaScript ဂေဟစနစ်ရှိ developer များကြုံတွေ့ရလေ့ရှိသည့်စိန်ခေါ်မှုတစ်ခုဖြစ်သည်။ မလိုအပ်သော မှီခိုမှုများကို ဖယ်ရှားခြင်းသည် အစုအဝေးအရွယ်အစားကို ကြီးမားစွာ လျှော့ချနိုင်ပြီး အပလီကေးရှင်း၏ စွမ်းဆောင်ရည်ကို တိုးမြင့်စေနိုင်သည့် ကြီးမားသော ပရောဂျက်များတွင် အထူးသဖြင့် သက်ဆိုင်ပါသည်။ ဤအသေးစိတ်လမ်းညွှန်တွင်၊ ဤအသုံးမပြုသော npm modules များကို မည်သို့ခွဲခြားပြီးဖယ်ရှားရမည်ကို ကျယ်ကျယ်ပြန့်ပြန့်ရှင်းပြပါမည်။

ဆက်ဖတ်ရန်

ဟုတ်ပါတယ်၊ ငါတောင်းဆိုထားတဲ့ ဆောင်းပါးကို ဘယ်လိုတည်ဆောက်ပြီး တင်ပြမယ်ဆိုတာက ဒီလိုပါ။

SuperTest HTTP စမ်းသပ်ခြင်းအတွက် အဆင့်မြင့်မားသော စိတ်ကူးတစ်ခုဖြစ်ပြီး Node.js developer များအတွက် ၎င်းတို့၏ API များကို ထိထိရောက်ရောက် စမ်းသပ်ရန် လွယ်ကူပြီး လိုက်လျောညီထွေရှိသော နည်းလမ်းကို ပေးဆောင်သည်။ ၎င်းသည် မည်သည့်စမ်းသပ်မှုဘောင်နှင့်မဆို လုပ်ဆောင်နိုင်ပြီး npm မှတစ်ဆင့် အလွယ်တကူ တပ်ဆင်နိုင်သည်။

ဆက်ဖတ်ရန်

Popper.js tooltips၊ popovers၊ drop-downs နှင့် အခြားသော web element အစုံအလင်အတွက် အစွမ်းထက်သော positioning engines များကို ပံ့ပိုးပေးသည့် မယုံနိုင်လောက်အောင် စွယ်စုံသုံး open-source စာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်း၏ အားသာချက်မှာ ရှုပ်ထွေးသော တွက်ချက်မှုများကို လျင်မြန်စွာ ထိရောက်စွာ ကိုင်တွယ်ပုံတွင် တည်ရှိနေပြီး၊ developer များအတွက် စိတ်ကြိုက်ပြင်ဆင်နိုင်သော ရွေးချယ်စရာများကို ပေးဆောင်နေပါသည်။ သင်သည် အတွေ့အကြုံရှိ Javascript dev ဖြစ်စေ၊ စတင်သည်ဖြစ်စေ Popper.js ကို သင့်ကိရိယာအစုံတွင် မိတ်ဆက်ခြင်းသည် ဂိမ်းပြောင်းလဲမှုတစ်ခု ဖြစ်နိုင်သည်။

ဆက်ဖတ်ရန်

ဟုတ်ပါတယ်၊ ဤသည်မှာ ဆောင်းပါး၏ ဖွဲ့စည်းပုံဖြစ်သည်။

ဘာသာပြန်အတွက် စမ်းသပ်ခြင်း မည်​သည့်​အ​ကြောင်း​မဆို​၏​အ​ဓိ​က​အပိုင်း​ဖြစ်​သည်​ software development လုပ်ငန်းစဉ်။ အဲဒါ သေချာအောင် ဘယ်လိုလုပ်ရမလဲ code ကို သင်ရေးသားရန် ရည်ရွယ်ထားသည့်အရာကို လုပ်ဆောင်ပြီး ချော်လဲသွားနိုင်သည့် မည်သည့် bug များကိုမဆို သင်မည်သို့ဖမ်းနိုင်မည်နည်း။ သင့်စစ်ဆေးမှုများမှ သင့်ကုဒ်မည်မျှရောက်ရှိသည်ကို အစီရင်ခံခြင်း၏ ဘုံနည်းလမ်းတစ်ခုမှာ စမ်းသပ်မှုအစီရင်ခံစာများမှတစ်ဆင့်ဖြစ်သည်။ JavaScript တွင်၊ လွှမ်းခြုံအစီရင်ခံစာများထုတ်လုပ်ရန် လုပ်ဆောင်နိုင်စွမ်းကို ပံ့ပိုးပေးသည့် ရေပန်းစားသော စမ်းသပ်မှုဘောင်တစ်ခုဖြစ်သည်။ ရှိ. Jest တွင် 'test:coverage' ဟူသော ညွှန်ကြားချက်ကို လုပ်ဆောင်ခြင်းသည် အသေးစိတ် စမ်းသပ်မှု အကျုံးဝင်မှုကို ပေးဆောင်မည်ဖြစ်သည်။

npm test -- --coverage

ဆက်ဖတ်ရန်

ဟုတ်ပါတယ်! ဤသည်မှာ အက်ပ်တစ်ခုတွင် `react-router-dom` ကို ထည့်သွင်းခြင်း၏ ရှင်းလင်းချက်ဖြစ်သည်။

Router DOM ကို တုံ့ပြန်ပါ။ `React.js` ဖြင့် ပြုလုပ်ထားသော အပလီကေးရှင်းများအတွက် ရွေ့လျားပြီး အခြေအနေအလိုက် လမ်းကြောင်းပေးသည့် ကိရိယာတစ်ခုအဖြစ် လူသိများသည်။ ၎င်း၏အဓိကရည်ရွယ်ချက်မှာ ဘရောက်ဆာ၏ URL တွင် မည်သည့်ပြောင်းလဲမှုများနှင့်မဆို အသုံးပြုသူ၏မျက်နှာပြင်ကို တစ်ပြိုင်တည်းလုပ်ဆောင်ရန်ဖြစ်သည်။ မတူညီသောအမြင်များအဖြစ်သို့ ကူးပြောင်းသည့်အခါ၊ သင့်ဝဘ်အက်ပ်လီကေးရှင်းကို ပိုမိုချောမွေ့ပြီး ပိုမိုမြန်ဆန်သောအသုံးပြုသူအတွေ့အကြုံကိုပေးသည့် စာမျက်နှာတစ်ခုလုံးကို ပြန်လည်စတင်ခြင်းမှ ရှောင်ကြဉ်ရန် သင်ရွေးချယ်နိုင်သည်။

//Install React Router DOM
npm install react-router-dom

ဆက်ဖတ်ရန်

HTML-Validate သည် ဖြစ်နိုင်ချေရှိသော ပြဿနာများအတွက် သင့် HTML ကို စိစစ်နိုင်စေမည့် ကောင်းမွန်သော ပလပ်အင်တစ်ခုဖြစ်သည်။ ယနေ့ခေတ်တွင်၊ မဟာမိတ်၊ စွမ်းဆောင်ရည်၊ အကောင်းဆုံးအလေ့အကျင့်များနှင့် SEO တို့သည် ဝဘ်ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အရေးကြီးသောအချက်များဖြစ်လာသည်။ HTML-Validate သည် သင့် HTML ကုဒ်များ ကိုက်ညီမှုရှိမရှိ သို့မဟုတ် ဤအချက်များကို လိုက်နာခြင်း ရှိ၊ ၎င်းသည် HTML အထားအသိုအမှားအယွင်းများ၊ ကန့်ကွက်ထားသောတဂ်များ၊ ထိရောက်မှုမရှိသော attribute များနှင့် အခြားအရာများအပါအဝင် စည်းမျဉ်း 60 ကျော်ကို စစ်ဆေးသည်။

ဆက်ဖတ်ရန်

JavaScript ရှိ ပရောက်စီ အရာဝတ္တုတစ်ခုအတွက် အပြုအမူနှင့် လုပ်ဆောင်ချက်များကို စိတ်ကြိုက်ပြင်ဆင်ရန် developer များအသုံးပြုသည့် ကောင်းမွန်သောကိရိယာတစ်ခုဖြစ်သည်။ ဤအရာဝတ္တုတွင် ခင်းကျင်းမှုများ၊ လုပ်ဆောင်ချက်များ သို့မဟုတ် အခြားအရာဝတ္ထုများလည်း ပါဝင်နိုင်သည်။ ပိုင်ဆိုင်မှုရှာဖွေခြင်း၊ တာဝန်ပေးခြင်း၊ စာရင်းကောက်ခြင်း၊ လုပ်ဆောင်ချက် တောင်းခံခြင်းနှင့် အခြားအရာများကဲ့သို့သော လုပ်ငန်းဆောင်တာများအတွက် အခြေခံအားဖြင့် အသုံးပြုပါသည်။

ဆက်ဖတ်ရန်