Bootstrap နှင့် Parcel

Parcel ကိုအသုံးပြု၍ သင့်ပရောဂျက်တွင် Bootstrap ၏ CSS နှင့် JavaScript ကို မည်သို့ထည့်သွင်းရန်နှင့် အစုအဝေးအတွက် တရားဝင်လမ်းညွှန်။

ဤစာမျက်နှာတွင်

အဆုံးထိ ကျော်သွားချင်ပါသလား။ twbs/example repository မှ ဤလမ်းညွှန်ချက်အတွက် source code နှင့် work demo ကို ဒေါင်းလုဒ်လုပ်ပါ ။ ဥပမာ StackBlitz တွင် သင်လည်း ဖွင့် နိုင်သော်လည်း Parcel သည် ထိုနေရာတွင် လောလောဆယ် မပံ့ပိုးနိုင်သောကြောင့် ၎င်းကို ဖွင့်၍မရပါ။

တည်ဆောက်သည်

ကျွန်ုပ်တို့သည် Bootstrap ဖြင့် ပါဆယ်ပရောဂျက်တစ်ခုကို အစမှစတင်တည်ဆောက်နေပါသည်၊ ထို့ကြောင့် အမှန်တကယ်မစတင်နိုင်သေးမီ ကြိုတင်လိုအပ်ချက်များနှင့် ရှေ့အဆင့်အချို့ရှိပါသည်။ ဤလမ်းညွှန်ချက်တွင် သင့်အား Node.js ထည့်သွင်းထားပြီး terminal နှင့် ရင်းနှီးမှုအချို့ရှိရန် လိုအပ်သည်။

ပရောဂျက်ဖိုင်တွဲတစ်ခုဖန်တီးပြီး npm ကို စနစ်ထည့်သွင်းပါ။ အပြန်အလှန်တုံ့ပြန်မေးခွန်းများမေးခြင်းကို ရှောင်ရှားရန် my-projectကျွန်ုပ်တို့သည် ဖိုင်တွဲ ကိုဖန်တီးပြီး npm ကို စတင်လုပ်ဆောင်ပါမည်။-y
```
mkdir my-project && cd my-project
npm init -y
```
ပါဆယ်ထုပ်ကို ထည့်သွင်းပါ။ ကျွန်ုပ်တို့၏ Webpack လမ်းညွှန်နှင့် မတူဘဲ၊ ဤနေရာတွင် တည်ဆောက်ရေးကိရိယာ မှီခိုမှုတစ်ခုတည်းသာ ရှိပါသည်။ Parcel သည် ၎င်းတို့ကို တွေ့ရှိသောကြောင့် ဘာသာစကား transformer (Sass ကဲ့သို့) အလိုအလျောက် တပ်ဆင်ပေးပါမည်။ --save-devဤမှီခိုအားထားမှုသည် ဖွံ့ဖြိုးတိုးတက်မှုအတွက်သာဖြစ်ပြီး ထုတ်လုပ်မှုအတွက်မဟုတ်ကြောင်း အချက်ပြရန် ကျွန်ုပ်တို့အသုံးပြုပါသည် ။
```
npm i --save-dev parcel
```
Bootstrap ကို install လုပ်ပါ။ ယခုကျွန်ုပ်တို့ Bootstrap ကို install လုပ်နိုင်သည်။ ကျွန်ုပ်တို့၏ dropdowns၊ popovers နှင့် tooltips များသည် ၎င်းတို့၏နေရာချထားမှုအတွက် ၎င်းပေါ်တွင်မူတည်သောကြောင့် Popper ကိုလည်း ထည့်သွင်းပါမည်။ အဆိုပါ အစိတ်အပိုင်းများကို အသုံးပြုရန် မစီစဉ်ပါက Popper ကို ဤနေရာတွင် ချန်လှပ်နိုင်ပါသည်။
```
npm i --save bootstrap @popperjs/core
```

ယခု ကျွန်ုပ်တို့တွင် လိုအပ်သော မှီခိုမှုအားလုံးကို ထည့်သွင်းထားသောကြောင့် ပရောဂျက်ဖိုင်များကို ဖန်တီးခြင်းနှင့် Bootstrap တင်သွင်းခြင်းတို့ကို လုပ်ဆောင်နိုင်မည်ဖြစ်သည်။

စီမံကိန်းဖွဲ့စည်းပုံ

ကျွန်ုပ်တို့သည် ဖိုင်တွဲ ကို ဖန်တီးပြီး my-projectnpm ကို စတင်လုပ်ဆောင်ပြီးဖြစ်သည်။ srcယခု ကျွန်ုပ်တို့သည် ပရောဂျက်ဖွဲ့စည်းပုံကို ပိုင်းခြားရန် ကျွန်ုပ်တို့၏ဖိုင်တွဲ၊ ပုံစံစာရွက်နှင့် JavaScript ဖိုင်ကို လည်း ဖန်တီးပါမည် ။ အောက်ပါတို့မှ လုပ်ဆောင် my-projectပါ သို့မဟုတ် အောက်တွင်ဖော်ပြထားသော ဖိုင်တွဲနှင့် ဖိုင်တည်ဆောက်ပုံကို ကိုယ်တိုင်ဖန်တီးပါ။

mkdir {src,src/js,src/scss}
touch src/index.html src/js/main.js src/scss/styles.scss

ပြီးသွားသောအခါ၊ သင်၏ ပရောဂျက် အပြည့်အစုံမှာ ဤကဲ့သို့ ဖြစ်သင့်သည်-

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
└── package.json

ဤအချိန်တွင်၊ အရာအားလုံးသည် နေရာမှန်တွင်ရှိသော်လည်း Parcel သည် ကျွန်ုပ်တို့၏ဆာဗာကိုစတင်ရန်အတွက် HTML စာမျက်နှာနှင့် npm script လိုအပ်ပါသည်။

ပါဆယ်ထုပ်ကို စီစဉ်သတ်မှတ်ပါ။

မှီခိုအားထားမှုများကို ထည့်သွင်းပြီး ကျွန်ုပ်တို့၏ ပရောဂျက်ဖိုင်တွဲကို ကုဒ်စတင်ရန် အဆင်သင့်ဖြစ်သဖြင့်၊ ယခုအခါ ကျွန်ုပ်တို့သည် ပါဆယ်ထုပ်ကို စီစဉ်သတ်မှတ်ပြီး ကျွန်ုပ်တို့၏ပရောဂျက်ကို စက်တွင်းတွင် လုပ်ဆောင်နိုင်ပြီဖြစ်သည်။ ပါဆယ်လ်ကိုယ်တိုင်က ဒီဇိုင်းဖြင့် ဖွဲ့စည်းမှုဖိုင်ကို မလိုအပ်သော်လည်း ကျွန်ုပ်တို့၏ဆာဗာကို စတင်ရန်အတွက် npm script နှင့် HTML ဖိုင်တစ်ခု လိုအပ်ပါသည်။

src/index.htmlဖိုင်ကို ဖြည့်ပါ ။ Parcel သည် တင်ဆက်ရန် စာမျက်နှာတစ်ခု လိုအပ်သည်၊ ထို့ကြောင့် index.htmlကျွန်ုပ်တို့၏ CSS နှင့် JavaScript ဖိုင်များအပါအဝင် အခြေခံ HTML အချို့ကို စနစ်ထည့်သွင်းရန် ကျွန်ုပ်တို့၏စာမျက်နှာကို အသုံးပြုပါသည်။
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
Bootstrap ၏ CSS ကို Webpack မှ တင်သောအခါတွင် ကျွန်ုပ်တို့သည် div class="container"ဤနေရာတွင် Bootstrap ပုံစံအနည်းငယ်ကို ထည့်သွင်းထားပါသည်။<button>

ကျွန်ုပ်တို့သည် Sass ကိုအသုံးပြုနေကြောင်း ပါဆယ်လ်က အလိုအလျောက်သိရှိပြီး ၎င်းကိုပံ့ပိုးရန်အတွက် Sass Parcel ပလပ်အင် ကို ထည့်သွင်း ပါ။ သို့သော် သင်ဆန္ဒရှိလျှင် သင်ကိုယ်တိုင်လည်း လုပ်ဆောင်နိုင်သည် npm i --save-dev @parcel/transformer-sass။
Parcel npm script များကိုထည့်ပါ။ အရာဝတ္ထု ကို ဖွင့်ပြီး package.jsonအောက်ပါ startscript ကို ထည့်ပါ။ scriptsကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Parcel ဖွံ့ဖြိုးတိုးတက်မှုဆာဗာကို စတင်ရန်နှင့် လမ်းညွှန်တွင် စုစည်းပြီးနောက် ကျွန်ုပ်တို့ဖန်တီးထားသော HTML ဖိုင်ကို တင်ဆက်ရန် ဤ script ကို အသုံးပြုပါမည် dist။
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
နောက်ဆုံးအနေနဲ့ ပါဆယ်ထုပ်ကို စတင်နိုင်ပါပြီ။ သင့် terminal ရှိ my-projectဖိုဒါမှ အသစ်ထည့်ထားသော npm script ကို run ပါ။
```
npm start
```

ဤလမ်းညွှန်အတွက် နောက်နှင့် နောက်ဆုံးအပိုင်းတွင်၊ Bootstrap ၏ CSS နှင့် JavaScript အားလုံးကို တင်သွင်းပါမည်။

Bootstrap ကိုတင်သွင်းပါ။

styles.scssပါဆယ်ထဲသို့ Bootstrap တင်သွင်းခြင်းသည် တင်သွင်းမှုနှစ်ခု၊ တစ်ခု နှင့် ကျွန်ုပ်တို့၏ထဲသို့ တစ်ခု တင်သွင်းမှုတို့ လိုအပ်ပါသည် main.js။

Bootstrap ၏ CSS ကို ထည့်သွင်းပါ။ src/scss/styles.scssBootstrap ၏အရင်းအမြစ် Sass အားလုံးကိုတင်သွင်းရန် အောက်ပါတို့ကို ထည့်ပါ ။
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
သင်အလိုရှိပါက ကျွန်ုပ်တို့၏စတိုင်စာရွက်များကို တစ်ဦးချင်းတင်သွင်းနိုင်သည်။ အသေးစိတ်အတွက် ကျွန်ုပ်တို့၏ Sass တင်သွင်းမှုစာရွက်စာတမ်းများကို ဖတ်ရှုပါ ။
Bootstrap ၏ JS ကိုတင်သွင်းပါ။ src/js/main.jsBootstrap ၏ JS အားလုံးကို ထည့်သွင်းရန် အောက်ပါတို့ကို ထည့်ပါ ။ Popper ကို Bootstrap မှတဆင့် အလိုအလျောက် တင်သွင်းပါမည်။
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
အစုအစည်းအရွယ်အစားများကို လျှော့ချရန်အတွက် လိုအပ်သလို JavaScript ပလပ်အင်များကို တစ်ဦးချင်းစီ တင်သွင်းနိုင်သည်-
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Bootstrap ၏ပလပ်အင်များကိုအသုံးပြုပုံအကြောင်း နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript docs ကိုဖတ်ပါ ။
ပြီးပါပြီ။ 🎉 Bootstrap ၏ရင်းမြစ် Sass နှင့် JS ကို အပြည့်အ၀ တင်ထားသဖြင့်၊ သင်၏ local development server သည် ယခုကဲ့သို့ ဖြစ်နေသင့်သည်။

ယခု သင်အသုံးပြုလိုသော Bootstrap အစိတ်အပိုင်းများကို စတင်ထည့်သွင်းနိုင်ပြီဖြစ်သည်။ အပိုစိတ်ကြိုက် Sass ထည့်သွင်းနည်းနှင့် သင်လိုအပ်သော Bootstrap ၏ CSS နှင့် JS အစိတ်အပိုင်းများကိုသာ တင်သွင်းခြင်းဖြင့် သင်၏တည်ဆောက်မှုကို အကောင်းဆုံးဖြစ်အောင်လုပ်ရန်အတွက် ပြီးပြည့်စုံသော Parcel နမူနာပရောဂျက်ကို စစ်ဆေး ကြည့် ပါ။

ဤနေရာတွင် တစ်ခုခု မှားယွင်းနေသည် သို့မဟုတ် ခေတ်နောက်ကျနေခြင်းကို မြင်ပါသလား။ GitHub တွင် ပြဿနာတစ်ခုကို ဖွင့် ပါ ။ ပြဿနာဖြေရှင်းရာတွင် အကူအညီ လိုအပ်ပါသလား။ GitHub တွင် ရှာဖွေပါ သို့မဟုတ် ဆွေးနွေးမှုကို စတင်ပါ ။