Bootstrap & Vite

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

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

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

တည်ဆောက်သည်

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

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

ယခု ကျွန်ုပ်တို့တွင် လိုအပ်သော မှီခိုမှုအားလုံးကို ထည့်သွင်းပြီး စနစ်ထည့်သွင်းခြင်းဖြင့်၊ ကျွန်ုပ်တို့သည် ပရောဂျက်ဖိုင်များကို ဖန်တီးခြင်းနှင့် 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 vite.config.js

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

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

vite.config.jsဤအချိန်တွင်၊ အရာအားလုံးသည် မှန်ကန်သောနေရာတွင် ရှိနေသော်လည်း ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၌ မဖြည့်ရ သေးသော ကြောင့် Vite သည် အလုပ်မဖြစ်ပါ ။

Vite ကို စီစဉ်သတ်မှတ်ပါ။

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

vite.config.jsသင်၏အယ်ဒီတာတွင် ဖွင့် ပါ။ ၎င်းသည် ဗလာဖြစ်သောကြောင့်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ဆာဗာကို စတင်နိုင်ရန် ၎င်းတွင် boilerplate config အချို့ကို ထည့်ရန်လိုအပ်ပါသည်။ config ၏ဤအပိုင်းသည် ကျွန်ုပ်တို့၏ပရောဂျက်၏ JavaScript ကိုရှာဖွေရန်နှင့် ဖွံ့ဖြိုးတိုးတက်ရေးဆာဗာသည် မည်သို့ပြုမူသင့်သည် ( srcဖိုဒါမှပူပြင်းသောပြန်ဆွဲချခြင်းဖြင့်) ကိုရှာဖွေရန် Vite အားပြောပြသည်။
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
နောက်တစ်ခု ကျွန်တော်တို့ ဖြည့်စွက်ပါတယ် src/index.html။ ၎င်းသည် စုစည်းထားသော CSS နှင့် JS ကိုအသုံးပြုရန် နောက်အဆင့်များတွင် ၎င်းတွင်ထည့်သွင်းမည့် CSS ကိုအသုံးပြုရန် Vite သည် HTML စာမျက်နှာဖြစ်သည်။
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>
```
Bootstrap ၏ CSS ကို Vite က တင်သောအခါတွင် ကျွန်ုပ်တို့သည် div class="container"ဤနေရာတွင် Bootstrap ပုံစံအနည်းငယ်ကို ထည့်သွင်းထားပါသည်။<button>
ယခု Vite ကို run ရန် npm script တစ်ခု လိုအပ်ပါသည်။ ဖွင့ package.json်ပြီး အောက်တွင် ပြထားသည့် ဇာတ်ညွှန်းကို ထည့်ပါ start(သင်တွင် စမ်းသပ်မှု Script ရှိသင့်သည်)။ ကျွန်ုပ်တို့၏ပြည်တွင်းရှိ Vite dev ဆာဗာကိုစတင်ရန် ဤဇာတ်ညွှန်းကို ကျွန်ုပ်တို့အသုံးပြုပါမည်။
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
နောက်ဆုံးအနေနဲ့ Vite ကို စတင်နိုင်ပါပြီ။ သင့် terminal ရှိ my-projectဖိုဒါမှ အသစ်ထည့်ထားသော npm script ကို run ပါ။
```
npm start
```

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

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

Bootstrap ၏ Sass တင်သွင်းမှုကို စနစ်ထည့်သွင်းပါ vite.config.js။ သင်၏ဖွဲ့စည်းပုံဖိုင်သည် ယခု ပြီးမြောက်ပြီးဖြစ်ပြီး အောက်ပါအတိုအထွာနှင့် ကိုက်ညီသင့်ပါသည်။ ဤနေရာတွင် တစ်ခုတည်းသော အပိုင်းအသစ်မှာ အပိုင်းဖြစ်သည်— တင်သွင်းမှုများကို တတ်နိုင်သမျှ ရိုးရှင်းအောင်ထားရန် resolveအတွင်း၌ ကျွန်ုပ်တို့၏ အရင်းအမြစ်ဖိုင်များသို့ နံမည်ထည့်ရန် ၎င်းကို အသုံးပြု ပါသည်။node_modules
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
ကဲ Bootstrap ရဲ့ CSS ကို တင်သွင်းကြည့်ရအောင်။ src/scss/styles.scssBootstrap ၏အရင်းအမြစ် Sass အားလုံးကိုတင်သွင်းရန် အောက်ပါတို့ကိုထည့်ပါ ။
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
သင်အလိုရှိပါက ကျွန်ုပ်တို့၏စတိုင်စာရွက်များကို တစ်ဦးချင်းတင်သွင်းနိုင်သည်။ အသေးစိတ်အတွက် ကျွန်ုပ်တို့၏ Sass တင်သွင်းမှုစာရွက်စာတမ်းများကို ဖတ်ရှုပါ ။
ထို့နောက် ကျွန်ုပ်တို့သည် CSS ကိုတင်ပြီး Bootstrap ၏ JavaScript ကိုတင်သွင်းသည်။ src/js/main.jsCSS ကိုတင်ရန်နှင့် Bootstrap ၏ JS အားလုံးကို ထည့်သွင်းရန် အောက်ပါတို့ကို ထည့်ပါ ။ Popper ကို Bootstrap မှတဆင့် အလိုအလျောက် တင်သွင်းပါမည်။
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 အစိတ်အပိုင်းများကိုသာ တင်သွင်းခြင်းဖြင့် သင့်တည်ဆောက်မှုကို အကောင်းဆုံးဖြစ်အောင် Vite နမူနာပရောဂျက်ကို စစ်ဆေး ကြည့် ပါ။

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