ပါဆယ်ထုပ်
Parcel ကို အသုံးပြု၍ သင့်ပရောဂျက်တွင် Bootstrap ထည့်သွင်းနည်းကို လေ့လာပါ။
ပါဆယ်ထုပ်ကို ထည့်သွင်းပါ။
Parcel Bundler ကို ထည့်သွင်းပါ ။
Bootstrap ကို install လုပ်ပါ။
npm ကို အသုံးပြု၍ bootstrap ကို Node.js module တစ်ခုအဖြစ် ထည့်သွင်းပါ။
Bootstrap သည် Property တွင်သတ်မှတ်ထားသည့် Popper ပေါ်တွင်မူတည်သည် ။ peerDependencies
ဆိုလိုသည်မှာ သင်သည် ၎င်းတို့နှစ်ဦးလုံးကို သင်၏ package.json
အသုံးပြုမှု တွင် ထည့်သွင်းရန် သေချာစေရမည်ဟု ဆိုလိုသည် npm install @popperjs/core
။
အားလုံးပြီးသွားတဲ့အခါ၊ မင်းရဲ့ ပရောဂျက်ကို ဒီပုံစံအတိုင်း တည်ဆောက်သွားမယ်။
project-name/
├── build/
├── node_modules/
│ └── bootstrap/
│ └── popper.js/
├── scss/
│ └── custom.scss
├── src/
│ └── index.html
│ └── index.js
└── package.json
JavaScript ကို ထည့်သွင်းခြင်း။
သင့်အက်ပ်၏ဝင်ပေါက်အမှတ်တွင် Bootstrap ၏ JavaScript ကို ထည့်သွင်းပါ (များသောအား ဖြင့် )src/index.js
။ ကျွန်ုပ်တို့၏ ပလပ်အင်များအားလုံးကို ဖိုင်တစ်ခုတွင် သို့မဟုတ် ၎င်းတို့ထဲမှ အစုခွဲတစ်ခုသာ လိုအပ်ပါက သီးခြားစီ တင်သွင်းနိုင်သည်။
// Import all plugins
import * as bootstrap from 'bootstrap';
// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';
// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';
CSS ကို ထည့်သွင်းခြင်း။
Bootstrap ၏ အလားအလာကို အပြည့်အဝအသုံးချပြီး သင့်လိုအပ်ချက်များအတွက် စိတ်ကြိုက်ပြင်ဆင်ရန်၊ သင့်ပရောဂျက်၏ အစုအဝေးလုပ်ငန်းစဉ်၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့် အရင်းအမြစ်ဖိုင်များကို အသုံးပြုပါ။
Bootstrap ၏ Sass ဖိုင်များကို တင်သွင်းရန်scss/custom.scss
သင့် ကိုယ်ပိုင် ဖန်တီးပြီး တပ်ဆင်ထားသော စိတ်ကြိုက် ကိန်းရှင်များကို အစားထိုး ပါ။
အက်ပ်ကိုတည်ဆောက်ပါ။
src/index.js
အပိတ် </body>
tag ရှေ့မှာ ထည့်သွင်းပါ ။
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
တည်းဖြတ်ပါ။package.json
သင့် ဖိုင် dev
တွင် build
scripts များ ထည့်ပါ ။package.json
"scripts": {
"dev": "parcel ./src/index.html",
"prebuild": "npx rimraf build",
"build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}
dev script ကိုဖွင့်ပါ။
သင့်အက်ပ်ကို တွင် ဝင်ရောက်ကြည့်ရှုနိုင်မည် http://127.0.0.1:1234
ဖြစ်သည်။
npm run dev
အက်ပ်ဖိုင်များကို တည်ဆောက်ပါ။
တည်ဆောက်ထားသော ဖိုင်များသည် build/
ဖိုဒါတွင် ရှိနေသည်။
npm run build