Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Bootstrap & Paakkii Weebsaayitii

Qajeelfama ofiisaa akkaataa CSS fi JavaScript Bootstrap pirojektii kee keessatti Webpack fayyadamuun hammachuu fi walitti qabdu.

Fuula kana irratti
Hanga dhumaatti darbuu barbaadduu? Koodii madda fi demoo hojii qajeelfama kanaaf kuusaa twbs/examples irraa buufadhu . Akkasumas fakkeenya gulaaluu kallattiif StackBlitz keessatti banuun ni danda'ama.

Qixeessuu

Bootstrap waliin pirojektii Webpack jalqabarraa ijaaraa jirra, kanaaf dhuguma jalqabuu keenya dura haal-duree tokko tokkoo fi tarkaanfiiwwan fuulduraa jiru. Qajeelfamni kun Node.js fe'amee fi tarminaalii wajjin walbaruu tokko tokko qabaachuu si gaafata.

  1. Galfata pirojektii uumuu fi npm saagi. Galmee uumnee my-projectnpm -yfalmii waliin jalqabna akka inni gaaffilee wal-qunnamtii hunda nu hin gaafanne.

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

  2. Webpack fe'adhu. Itti aansuudhaan hirkattummaa misooma Webpack keenya fe'uu qabna: webpackwiirtuu Webpack tiif, webpack-clikanaaf ajajoota Webpack tarminaalii irraa hojjechuu dandeenya, akkasumas webpack-dev-serverakka sarvarii misooma naannoo hojjechuu dandeenya. --save-devHirkatummaawwan kun itti fayyadama misoomaa qofaaf malee oomishaaf akka hin taane mallattoo itti kennuuf itti fayyadamna.

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

  3. Bootstrap jedhamu fe'adhu. Amma Bootstrap install gochuu dandeenya. Akkasumas Popper ni fe'anna erga dropdowns, popovers, fi tooltips keenya bakka isaaniif irratti hundaa'aniif. Yoo qaamolee sana fayyadamuuf karoorfatte hin taane, Popper asitti dhiisuu dandeessa.

    npm i --save bootstrap @popperjs/core

  4. Hirkatummaa dabalataa fe'i. Webpack fi Bootstrap malees, CSS fi JS Bootstrap Webpack waliin sirnaan galchuu fi walitti qabuuf hirkattummaa muraasa dabalataa nu barbaachisa. Isaan keessaa Sass, fe'attoota tokko tokko, fi Autoprefixer of keessatti qabatu.

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

Amma hirkattummaa barbaachisoo ta'an hunda erga fe'annee booda, faayiloota pirojektii uumuu fi Bootstrap galchuu irratti hojiitti galuu dandeenya.

Caasaa pirojektii

Duraanis my-projectgalmee uumnee npm jalqabneerra. srcAmma akkasumas galmeewwan keenyaa fi distcaasaa pirojektii naannessuuf ni uumna . Kanneen armaan gadii irraa fiigi my-project, ykn harkaan galmee fi caasaa faayilii armaan gadii uumi.

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

Yeroo xumurtu, pirojektiin kee guutuun akkas fakkaachuu qaba:

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

Yeroo kanatti wanti hundi bakka sirrii ta'etti jira, garuu Webpack hin hojjetu sababiin isaas webpack.config.jshanga ammaatti keenya hin guunne.

Webpack qindeessuu

Hirkatummaa fe'amee fi galmeen pirojektii keenyaa koodii akka jalqabnuuf qophaa'ee, amma Webpack qindeessuu fi pirojektii keenya naannootti hojjechuu dandeenya.

  1. webpack.config.jsGulaalaa kee keessaa bani . Duwwaa waan ta'eef, server keenya jalqabuu akka dandeenyuuf boilerplate config tokko tokko itti dabaluu qabna. Kutaan qindeessaa kun Webpack akka JavaScript pirojektii keenyaa barbaaduu qaban, koodii qindaa'e eessatti akka ( dist), fi akkaataa sarvariin misoomaa amala qabaachuu qabu ( distgalfata irraa harkisuu ho'aa irra deebi'amee fe'uu) akka barbaadu itti hima.

    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. Itti aansuudhaan dist/index.html. Kun fuula HTML Webpack browser keessatti fe'uun CSS fi JS bundled ta'e fayyadamuuf tarkaanfiiwwan booda irratti itti daballudha. Sana gochuu keenya dura waan agarsiisu kennuu fi outputJS tarkaanfii duraa irraa hammachuu qabna.

    <!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 styling xiqqoo asitti div class="container"fi waliin <button>dabalaa jirra akka yeroo Bootstrap's CSS Webpack'n fe'amu arginu.

  3. Amma Webpack hojjechuuf npm script nu barbaachisa. Iskiriiptii armaan gadii agarsiifame baniitii package.jsonitti dabali start(iskiriiptii qormaataa duraan qabaachuu qabda). Iskiriiptii kana fayyadamnee Webpack dev server naannoo keenyaa jalqabna.

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

  4. Dhumarrattis Webpack jalqabuu dandeenya. Galmee tarminaalii kee keessa jiru irraa my-project, iskiriiptii npm haaraa dabalame sana hojjedhu:

    npm start
    Webpack dev sarvarii hojjechaa jira

Kutaa itti aanuu fi isa dhumaa qajeelfama kanaa keessatti, fe'attoota Webpack ni qindeessinee CSS fi JavaScript Bootstrap hunda galchina.

Bootstrap galchuu

Bootstrap gara Webpack galchuuf loaders kutaa jalqabaa keessatti install goone barbaada. npm waliin fe'annee jirra, amma garuu Webpack akka isaan fayyadamuuf qindeessuu qaba.

  1. Fe'umsaa webpack.config.js. Faayilli qindeessaa kee amma xumuramee jira, akkasumas cuquliisa armaan gadii wajjin walsimuu qaba. Kutaan haaraan asitti jiru kutaa qofa 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'
          }
        ]
      }
    ]
  }
}

    Maaliif loaders kana hunda akka nu barbaachisu irra deebi'amee ilaalla. style-loaderCSS gara <style>elementii <head>fuula HTML keessaatti galcha, fi css-loaderfayyadamuuf gargaara , Autoprefixer'f barbaachisaadha, akkasumas Sass akka fayyadamnu nu dandeessisa.@importurl()postcss-loadersass-loader

  2. Amma, CSS Bootstrap haa galchinu. src/scss/styles.scssMadda Bootstrap Sass hunda galchuuf kanneen armaan gadii to itti dabali .

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

    Akkasumas yoo barbaadde stylesheets keenya dhuunfaan galchuu dandeessa. Bal'ina isaaf docs import Sass keenya dubbisaa .

  3. Itti aansuudhaan CSS fe'annee JavaScript Bootstrap galchina. src/js/main.jsCSS fe'uuf fi JS Bootstrap hunda galchuuf kanneen armaan gadii to itti dabali . Popper karaa Bootstrap ofumaan ni galfama.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    Akkasumas, hammangaa baandaa gadi qabuuf akka barbaachisummaa isaatti dhuunfaan ifteessitoota JaavaScript galchuu dandeessa:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    Odeeffannoo dabalataa akkaataa itti fayyadama Bootstrap's plugins argachuuf docs JavaScript keenya dubbisi .

  4. Atis xumurteetta! 🎉 Maddi Bootstrap's Sass fi JS guutummaatti fe'amee waan jiruuf, amma sarvariin misooma naannoo keessanii akkas fakkaachuu qaba.

    Webpack dev server Bootstrap waliin hojjetu

    Amma qaamolee Bootstrap fayyadamuu barbaaddu kamiyyuu dabaluu jalqabuu dandeessa. Akkaataa Sass amala dabalataa hammachuu fi kutaalee CSS fi JS Bootstrap si barbaachisan qofa galchuudhaan ijaarsa kee fooyyessuu dandeessuuf pirojektii fakkeenya Webpack guutuu ilaaluu kee mirkaneessi .

Omishaa fooyyessuu

Saagi kee irratti hundaa'uun, fooyya'iinsa nageenyaa fi saffisa dabalataa tokko tokko kan pirojektii oomisha keessatti hojjechuuf faayidaa qaban hojiirra oolchuu barbaadda ta'a. Hubadhu, fooyya'iinsi kun pirojektii fakkeenya Webpack irratti hojiirra akka hin oolle fi hojiirra oolchuuf kan kee ta'a.

CSS baasuu

Kan style-loadernuti armaan olitti qindeessine haala mijataa ta'een CSS gara baandaatti erga akka harkaan faayilii CSS keessa fe'uun dist/index.htmlhin barbaachifneef. Malli kun Imaammata Nageenya Qabiyyee cimaa ta'een hojjechuu dhiisuu danda'a, haa ta'u malee, sababa guddina baandaa guddaa ta'een application kee keessatti bottleneck ta'uu danda'a.

CSS akka kallattiin irraa fe'uu dandeenyutti adda baasuuf , Webpack plugin dist/index.htmlfayyadami .mini-css-extract-loader

Jalqaba, plugin sana install godhaa:

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

Sana booda instantiate fi plugin qindeessaa Webpack keessatti fayyadami:

--- 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
           },
           {

Erga npm run buildirra deebi'amee hojjetee booda, faayilii haaraan ni jiraata dist/main.css, kunis CSS hunda kan galfame of keessaa qabaata src/js/main.js. Yoo dist/index.htmlamma biraawzari kee keessatti ilaalte, akkaataan sun ni dhabama, akkuma amma dist/main.css. dist/index.htmlCSS uumame akkasitti hammachuu dandeessa :

--- 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>

Faayilota SVG baasuu

CSS'n Bootstrap wabiiwwan hedduu faayilii SVG karaa data:URI sarara keessaa of keessatti qabata. Yoo Imaammata Nageenya Qabiyyee pirojektii keetiif kan data:URI fakkiiwwaniif ugguru ibsite, kana booda faayilii SVG kun hin fe'aman. Faayilota SVG sarara keessaa amala moojuulota qabeenya Webpack fayyadamuun baasuudhaan rakkoo kana irra darbuu dandeessa.

Faayilota SVG sarara keessaa akka akkasitti baasuuf Webpack qindeessii:

--- 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: [

Erga irra deebitee fiigdee booda , faayilii SVG gara CSS keessaa baafamanii fi sirriitti wabii npm run buildta'an ni argatta .dist/icons

Asitti waan dogoggoraa ykn yeroon isaa darbe argitaa? Maaloo GitHub irratti dhimma bani . Rakkoo furuu irratti gargaarsa barbaadduu? GitHub irratti barbaadi ykn marii jalqabi .