Bootstrap နှင့် Webpack

တည်ဆောက်သည်

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

1. ပရောဂျက်ဖိုင်တွဲတစ်ခုဖန်တီးပြီး npm ကို စနစ်ထည့်သွင်းပါ။ အပြန်အလှန်တုံ့ပြန်မေးခွန်းများမေးခြင်းကို ရှောင်ရှားရန် my-projectကျွန်ုပ်တို့သည် ဖိုင်တွဲ ကိုဖန်တီးပြီး npm ကို စတင်လုပ်ဆောင်ပါမည်။-y

   mkdir my-project && cd my-project
   npm init -y
   

2. Webpack ကို install လုပ်ပါ။ နောက်တစ်ခု ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ Webpack ဖွံ့ဖြိုးတိုးတက်မှု မှီခိုမှုကို ထည့်သွင်းရန် လိုအပ်သည်- webpackWebpack ၏ အဓိကအချက်မှာ၊ webpack-cliထို့ကြောင့် ကျွန်ုပ်တို့သည် terminal မှ Webpack ညွှန်ကြားချက်များကို လုပ်ဆောင်နိုင်ပြီး၊ သို့မှသာ ကျွန်ုပ်တို့သည် webpack-dev-serverဒေသဆိုင်ရာ ဖွံ့ဖြိုးတိုးတက်မှုဆာဗာကို လုပ်ဆောင်နိုင်မည်ဖြစ်သည်။ --save-devဤမှီခိုမှုများသည် ဖွံ့ဖြိုးတိုးတက်မှုအတွက်သာဖြစ်ပြီး ထုတ်လုပ်မှုအတွက်မဟုတ်ကြောင်း ကျွန်ုပ်တို့အချက်ပြရန် ကျွန်ုပ်တို့အသုံးပြုပါသည် ။

   npm i --save-dev webpack webpack-cli webpack-dev-server
   

3. Bootstrap ကို install လုပ်ပါ။ ယခုကျွန်ုပ်တို့ Bootstrap ကို install လုပ်နိုင်သည်။ ကျွန်ုပ်တို့၏ dropdowns၊ popovers နှင့် tooltips များသည် ၎င်းတို့၏နေရာချထားမှုအတွက် ၎င်းပေါ်တွင်မူတည်သောကြောင့် Popper ကိုလည်း ထည့်သွင်းပါမည်။ အဆိုပါ အစိတ်အပိုင်းများကို အသုံးပြုရန် မစီစဉ်ပါက Popper ကို ဤနေရာတွင် ချန်လှပ်နိုင်ပါသည်။

   npm i --save bootstrap @popperjs/core
   

4. ထပ်လောင်းမှီခိုမှုများ ထည့်သွင်းပါ။ Webpack နှင့် Bootstrap အပြင်၊ Webpack ဖြင့် Bootstrap ၏ CSS နှင့် JS ကို မှန်ကန်စွာ ထည့်သွင်းပြီး အစုအစည်းပြုလုပ်ရန် နောက်ထပ်မှီခိုမှုအနည်းငယ် လိုအပ်ပါသည်။ ၎င်းတို့တွင် Sass၊ အချို့သော loaders နှင့် Autoprefixer တို့ ပါဝင်သည်။

   npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
   

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

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

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

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

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

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

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

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

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

1. webpack.config.jsသင်၏အယ်ဒီတာတွင် ဖွင့် ပါ။ ၎င်းသည် ဗလာဖြစ်သောကြောင့်၊ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ဆာဗာကို စတင်နိုင်ရန် ၎င်းတွင် boilerplate config အချို့ကို ထည့်ရန်လိုအပ်ပါသည်။ config ၏ ဤအပိုင်းသည် Webpack သည် ကျွန်ုပ်တို့၏ ပရောဂျက်၏ JavaScript ကို ရှာဖွေရန်၊ စုစည်းထားသော ကုဒ်ကို ( dist) သို့ထုတ်ပေးရမည့်နေရာနှင့် ဖွံ့ဖြိုးတိုးတက်မှုဆာဗာသည် မည်သို့ပြုမူသင့်သည် ( distဖိုင်တွဲကို hot reload ဖြင့် ဆွဲထုတ်သည်)။

   const path = require('path')
   
   module.exports = {
     entry: './src/js/main.js',
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, 'dist')
     },
     devServer: {
       static: path.resolve(__dirname, 'dist'),
       port: 8080,
       hot: true
     }
   }
   

2. နောက်တစ်ခုကတော့ ကျွန်တော်တို့ရဲ့ ဖြည့်စွက်စာပါ dist/index.html။ ၎င်းသည် စုစည်းထားသော CSS နှင့် JS ကိုအသုံးပြုရန် နောက်အဆင့်များတွင် ၎င်းကိုကျွန်ုပ်တို့ထည့်သွင်းမည့်ဘရောက်ဆာတွင် HTML စာမျက်နှာ Webpack တင်ပေးပါမည်။ အဲဒါကို မလုပ်ဆောင်ခင်မှာ၊ outputအရင်အဆင့်က JS ကို တင်ဆက်ပြီး ထည့်သွင်းဖို့ တစ်ခုခုပေးရပါမယ်။

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>Bootstrap w/ Webpack</title>
     </head>
     <body>
       <div class="container py-4 px-3 mx-auto">
         <h1>Hello, Bootstrap and Webpack!</h1>
         <button class="btn btn-primary">Primary button</button>
       </div>
       <script src="./main.js"></script>
     </body>
   </html>
   

   Bootstrap ၏ CSS ကို Webpack မှ တင်သောအခါတွင် ကျွန်ုပ်တို့သည် div class="container"ဤနေရာတွင် Bootstrap ပုံစံအနည်းငယ်ကို ထည့်သွင်းထားပါသည်။<button>

3. ယခု Webpack ကို run ရန် npm script တစ်ခု လိုအပ်ပါသည်။ ဖွင့ package.json်ပြီး အောက်တွင် ပြထားသည့် ဇာတ်ညွှန်းကို ထည့်ပါ start(သင်တွင် စမ်းသပ်မှု Script ရှိသင့်သည်)။ ကျွန်ုပ်တို့၏ဒေသခံ Webpack dev server ကိုစတင်ရန် ဤ script ကိုအသုံးပြုပါမည်။

   {
     // ...
     "scripts": {
       "start": "webpack serve --mode development",
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     // ...
   }
   

4. နောက်ဆုံးအနေနဲ့၊ Webpack ကို စတင်နိုင်ပါပြီ။ သင့် terminal ရှိ my-projectဖိုဒါမှ အသစ်ထည့်ထားသော npm script ကို run ပါ။

   npm start
   

   

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

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

Webpack သို့ Bootstrap တင်သွင်းခြင်းသည် ပထမအပိုင်းတွင် ကျွန်ုပ်တို့ထည့်သွင်းထားသော loaders လိုအပ်ပါသည်။ ၎င်းတို့ကို npm ဖြင့် ထည့်သွင်းထားသော်လည်း ယခုအခါ Webpack ကို အသုံးပြုရန် စီစဉ်သတ်မှတ်ထားရန် လိုအပ်ပါသည်။

1. တွင် loaders ကိုတပ်ဆင်ပါ webpack.config.js။ သင်၏ဖွဲ့စည်းပုံဖိုင်သည် ယခု ပြီးမြောက်ပြီးဖြစ်၍ အောက်ပါအတိုအထွာနှင့် ကိုက်ညီသင့်ပါသည်။ ဤနေရာတွင် တစ်ခုတည်းသော moduleအပိုင်းအသစ်မှာ အပိုင်းဖြစ်သည်။

   const path = require('path')
   
   module.exports = {
     entry: './src/js/main.js',
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, 'dist')
     },
     devServer: {
       static: path.resolve(__dirname, 'dist'),
       port: 8080,
       hot: true
     },
     module: {
       rules: [
         {
           test: /\.(scss)$/,
           use: [
             {
               loader: 'style-loader'
             },
             {
               loader: 'css-loader'
             },
             {
               loader: 'postcss-loader',
               options: {
                 postcssOptions: {
                   plugins: () => [
                     require('autoprefixer')
                   ]
                 }
               }
             },
             {
               loader: 'sass-loader'
             }
           ]
         }
       ]
     }
   }
   

   ဤသည်မှာ ကျွန်ုပ်တို့ဘာကြောင့် ဤ loaders များအားလုံးကို လိုအပ်သည်ဆိုသော အကျဉ်းချုပ်ဖြစ်သည်။ CSS ကို HTML စာမျက်နှာ ရှိ ဒြပ်စင်တစ်ခု style-loaderထဲသို့ ထိုးသွင်းပြီး အသုံးပြု ရာတွင် ကူညီပေးပြီး Autoprefixer အတွက် လိုအပ်ပြီး Sass ကို အသုံးပြုခွင့်ပေးသည်။<style><head>css-loader@importurl()postcss-loadersass-loader

2. ကဲ Bootstrap ရဲ့ CSS ကို တင်သွင်းကြည့်ရအောင်။ src/scss/styles.scssBootstrap ၏အရင်းအမြစ် Sass အားလုံးကိုတင်သွင်းရန် အောက်ပါတို့ကိုထည့်ပါ ။

   // Import all of Bootstrap's CSS
   @import "~bootstrap/scss/bootstrap";
   

   သင်အလိုရှိပါက ကျွန်ုပ်တို့၏စတိုင်စာရွက်များကို တစ်ဦးချင်းတင်သွင်းနိုင်သည်။ အသေးစိတ်အတွက် ကျွန်ုပ်တို့၏ Sass တင်သွင်းမှုစာရွက်စာတမ်းများကို ဖတ်ရှုပါ ။

3. ထို့နောက် ကျွန်ုပ်တို့သည် 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 ကိုဖတ်ပါ ။

4. ပြီးပါပြီ။ 🎉 Bootstrap ၏ရင်းမြစ် Sass နှင့် JS ကို အပြည့်အ၀ တင်ထားသဖြင့်၊ သင်၏ local development server သည် ယခုကဲ့သို့ ဖြစ်နေသင့်သည်။

   

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

ထုတ်လုပ်မှု ပိုမိုကောင်းမွန်ရေး

သင်၏တပ်ဆင်မှုအပေါ်မူတည်၍ ပရောဂျက်ကိုလုပ်ဆောင်ရန်အတွက် အသုံးဝင်သော နောက်ထပ်လုံခြုံရေးနှင့် မြန်နှုန်းပိုကောင်းအောင်ပြင်ဆင်မှုများကို သင်အကောင်အထည်ဖော်လိုပေမည်။ ဤကောင်းမွန်အောင်လုပ်ဆောင်မှုများကို Webpack နမူနာပရောဂျက်တွင် အသုံးချခြင်းမရှိကြောင်း နှင့် အကောင်အထည်ဖော်ရန် သင့်အပေါ်တွင် မူတည်ကြောင်း သတိပြုပါ။

CSS ကို ဖြည်

အထက်တွင် style-loaderကျွန်ုပ်တို့ configure လုပ်ထားသည့်အရာသည် CSS ဖိုင်ကို manually loading ပြုလုပ်ရန် မလိုအပ်ဘဲ အစုအစည်းထဲသို့ CSS ကို အဆင်ပြေစွာ ထုတ်လွှတ် dist/index.htmlပါသည်။ ဤနည်းလမ်းသည် တင်းကျပ်သော အကြောင်းအရာလုံခြုံရေးမူဝါဒနှင့် အလုပ်မဖြစ်နိုင်သော်လည်း အစုအဝေးအရွယ်အစားကြီးခြင်းကြောင့် သင့်လျှောက်လွှာတွင် ပိတ်ဆို့မှုများဖြစ်လာနိုင်သည်။

CSS မှ တိုက်ရိုက်တင်နိုင်စေရန် ၊ Webpack plugin dist/index.htmlကို အသုံးပြုပါ ။mini-css-extract-loader

ပထမဦးစွာ plugin ကို install လုပ်ပါ။

npm install --save-dev mini-css-extract-plugin

ထို့နောက် ချက်ချင်းလုပ်ဆောင်ပြီး Webpack ဖွဲ့စည်းမှုပုံစံတွင် ပလပ်အင်ကို အသုံးပြုပါ-

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

ပြန်လည်ပတ် ပြီးနောက် ၊ တင်သွင်းသော CSS အားလုံးကို ပါ၀င် npm run buildမည့် ဖိုင်အသစ်တစ်ခု ပေါ်လာလိမ့်မည် ။ သင့်ဘရောက်ဆာတွင် ယခု ကြည့်ရှု ပါက၊ စတိုင်လ်သည် ယခုရှိနေသည့်အတိုင်း ပျောက်နေ မည်ဖြစ်သည်။ ထုတ်ပေးထားသော CSS ကို ဤကဲ့သို့ ထည့်သွင်းနိုင်သည် ။dist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/index.html

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

SVG ဖိုင်များကို ဖြည်ခြင်း။

data:Bootstrap ၏ CSS တွင် inline URI များ မှတစ်ဆင့် SVG ဖိုင်များအတွက် ရည်ညွှန်းချက်များစွာ ပါဝင်သည် ။ ပုံများအတွက် URI များကို ပိတ်ဆို့သည့် သင့်ပရောဂျက်အတွက် အကြောင်းအရာ လုံခြုံရေးမူဝါဒကို သင်သတ်မှတ်ပါက data:၊ ထို SVG ဖိုင်များကို ဖွင့်မည်မဟုတ်ပါ။ Webpack ၏ ပိုင်ဆိုင်မှု modules အင်္ဂါရပ်ကို အသုံးပြု၍ inline SVG ဖိုင်များကို ထုတ်ယူခြင်းဖြင့် ဤပြဿနာကို ဖြေရှင်းနိုင်သည်။

ဤကဲ့သို့သော inline SVG ဖိုင်များကို ထုတ်ယူရန် Webpack ကို စီစဉ်သတ်မှတ်ပါ-

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

ထပ်မံ လည်ပတ်ပြီးနောက် ၊ CSS မှ npm run buildထုတ်ယူထားသော SVG ဖိုင်များကို သင်တွေ့ရပါမည် ။dist/icons

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