გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
Check
in English

Bootstrap & Webpack

ოფიციალური გზამკვლევი, თუ როგორ უნდა ჩართოთ და დააკავშიროთ Bootstrap-ის CSS და JavaScript თქვენს პროექტში Webpack-ის გამოყენებით.

ამ გვერდზე
გსურთ ბოლომდე გამოტოვოთ? ჩამოტვირთეთ ამ სახელმძღვანელოს საწყისი კოდი და სამუშაო დემო ვერსია twbs/მაგალითების საცავიდან . თქვენ ასევე შეგიძლიათ გახსნათ მაგალითი StackBlitz- ში პირდაპირი რედაქტირებისთვის.

Აწყობა

ჩვენ ვქმნით Webpack პროექტს Bootstrap-ით ნულიდან, ასე რომ, არსებობს გარკვეული წინაპირობები და წინა ნაბიჯები, სანამ ნამდვილად დავიწყებთ. ეს გზამკვლევი მოითხოვს, რომ გქონდეთ Node.js დაინსტალირებული და გარკვეული ცოდნა ტერმინალთან.

  1. შექმენით პროექტის საქაღალდე და დააყენეთ npm. ჩვენ შევქმნით my-projectსაქაღალდეს და მოვაწყობთ npm-ს -yარგუმენტით, რათა თავიდან ავიცილოთ ყველა ინტერაქტიული შეკითხვის დასმა.

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

  2. დააინსტალირეთ Webpack. შემდეგი, ჩვენ უნდა დავაინსტალიროთ ჩვენი Webpack განვითარების დამოკიდებულებები: webpackWebpack-ის ბირთვისთვის, webpack-cliასე რომ, ჩვენ შეგვიძლია გავუშვათ Webpack ბრძანებები ტერმინალიდან და webpack-dev-serverამგვარად, ჩვენ შეგვიძლია გავუშვათ ადგილობრივი განვითარების სერვერი. ჩვენ ვიყენებთ --save-devიმის სიგნალს, რომ ეს დამოკიდებულებები მხოლოდ განვითარებისთვისაა და არა წარმოებისთვის.

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

  3. დააინსტალირეთ Bootstrap. ახლა ჩვენ შეგვიძლია დავაყენოთ Bootstrap. ჩვენ ასევე დავაინსტალირებთ Popper-ს, რადგან ჩვენი ჩამოსაშლელი ფაილები, პოპოვერები და ინსტრუმენტების რჩევები მასზეა დამოკიდებული მათი პოზიციონირებისთვის. თუ არ გეგმავთ ამ კომპონენტების გამოყენებას, შეგიძლიათ გამოტოვოთ პოპერი აქ.

    npm i --save bootstrap @popperjs/core

  4. დააინსტალირეთ დამატებითი დამოკიდებულებები. Webpack-ისა და Bootstrap-ის გარდა, ჩვენ გვჭირდება კიდევ რამდენიმე დამოკიდებულება Bootstrap-ის CSS-ისა და JS-ის Webpack-თან სათანადო იმპორტირებისთვის და შეკვრისთვის. მათ შორისაა Sass, ზოგიერთი ჩამტვირთავი და Autoprefixer.

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

ახლა, როდესაც ჩვენ გვაქვს ყველა საჭირო დამოკიდებულების დაყენება, ჩვენ შეგვიძლია დავიწყოთ მუშაობა პროექტის ფაილების შექმნასა და Bootstrap-ის იმპორტირებაზე.

პროექტის სტრუქტურა

ჩვენ უკვე შევქმენით my-projectსაქაღალდე და ინიციალიზებული გვაქვს npm. ახლა ჩვენ ასევე შევქმნით ჩვენს 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 არ იმუშავებს, რადგან ჯერ არ შევავსეთ ჩვენი webpack.config.js.

Webpack-ის კონფიგურაცია

დამოკიდებულებებით დაინსტალირებული და ჩვენი პროექტის საქაღალდე მზად არის კოდირების დასაწყებად, ახლა შეგვიძლია დავაკონფიგურიროთ Webpack და გავატაროთ ჩვენი პროექტი ადგილობრივად.

  1. გახსენით webpack.config.jsთქვენს რედაქტორში. ვინაიდან ის ცარიელია, ჩვენ უნდა დავამატოთ ქვაბის კონფიგურაცია, რათა შევძლოთ ჩვენი სერვერის გაშვება. კონფიგურაციის ეს ნაწილი გვეუბნება, რომ Webpack უნდა მოძებნოს ჩვენი პროექტის JavaScript, სად უნდა გამოვიდეს კომპილირებული კოდი ( dist) და როგორ უნდა მოიქცეს განვითარების სერვერი ( distსაქაღალდიდან ამოღება ცხელი გადატვირთვით).

    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. ეს არის HTML გვერდი Webpack, რომელიც ჩაიტვირთება ბრაუზერში, რათა გამოიყენოს შეფუთული CSS და JS, რომელსაც მას მოგვიანებით დავამატებთ. სანამ ამის გაკეთებას შევძლებთ, უნდა მივცეთ მას რაიმე გასაფორმებელი და ჩავრთოთ outputJS წინა საფეხურიდან.

    <!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-ის მცირე სტილს აქ div class="container"და <button>ისე, რომ დავინახოთ, როდის ჩაიტვირთება Bootstrap-ის CSS Webpack-ის მიერ.

  3. ახლა ჩვენ გვჭირდება npm სკრიპტი Webpack-ის გასაშვებად. გახსენით package.jsonდა დაამატეთ startქვემოთ ნაჩვენები სკრიპტი (თქვენ უკვე უნდა გქონდეთ ტესტის სკრიპტი). ჩვენ გამოვიყენებთ ამ სკრიპტს ჩვენი ადგილობრივი Webpack დეველ სერვერის დასაწყებად.

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

  4. და ბოლოს, ჩვენ შეგვიძლია დავიწყოთ Webpack. თქვენი ტერმინალის my-projectსაქაღალდედან გაუშვით ახლად დამატებული npm სკრიპტი:

    npm start
    Webpack დეველ სერვერი მუშაობს

ამ სახელმძღვანელოს მომდევნო და ბოლო განყოფილებაში ჩვენ დავაყენებთ Webpack loaders-ს და შემოვატარებთ Bootstrap-ის ყველა CSS-ს და JavaScript-ს.

ჩატვირთვის იმპორტი

Bootstrap-ის Webpack-ში იმპორტისთვის საჭიროა ჩვენ მიერ დაინსტალირებული ჩამტვირთველები პირველ განყოფილებაში. ჩვენ დავაინსტალირეთ ისინი npm-ით, მაგრამ ახლა Webpack უნდა იყოს კონფიგურირებული მათი გამოსაყენებლად.

  1. დააყენეთ მტვირთავები ში 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'
          }
        ]
      }
    ]
  }
}

    აქ არის მიმოხილვა, თუ რატომ გვჭირდება ყველა ეს მტვირთავი. style-loaderახდენს CSS-ის შეყვანას HTML გვერდის <style>ელემენტში , ეხმარება და , საჭიროა Autoprefixer-ისთვის და საშუალებას გვაძლევს გამოვიყენოთ Sass.<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-ის იმპორტისთვის. პოპერის იმპორტი ავტომატურად მოხდება 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'

    წაიკითხეთ ჩვენი JavaScript დოკუმენტები დამატებითი ინფორმაციისთვის, თუ როგორ გამოიყენოთ Bootstrap-ის დანამატები.

  4. და თქვენ დაასრულეთ! 🎉 Bootstrap-ის წყარო Sass და JS სრულად დატვირთული, თქვენი ლოკალური განვითარების სერვერი ახლა ასე უნდა გამოიყურებოდეს.

    Webpack Dev სერვერი მუშაობს Bootstrap-ით

    ახლა თქვენ შეგიძლიათ დაიწყოთ ნებისმიერი Bootstrap კომპონენტის დამატება, რომლის გამოყენებაც გსურთ. დარწმუნდით, რომ შეამოწმეთ სრული Webpack-ის მაგალითის პროექტი , თუ როგორ უნდა შეიტანოთ დამატებითი საბაჟო Sass და გააუმჯობესოთ თქვენი კონსტრუქცია Bootstrap-ის CSS-ისა და JS-ის მხოლოდ იმ ნაწილების იმპორტით, რომელიც გჭირდებათ.

წარმოების ოპტიმიზაცია

თქვენი დაყენებიდან გამომდინარე, შეიძლება დაგჭირდეთ უსაფრთხოებისა და სიჩქარის დამატებითი ოპტიმიზაციის განხორციელება, რომელიც სასარგებლოა პროექტის წარმოებაში გასაშვებად. გაითვალისწინეთ, რომ ეს ოპტიმიზაცია არ არის გამოყენებული Webpack-ის მაგალითის პროექტზე და თქვენზეა დამოკიდებული მისი განხორციელება.

CSS-ის ამოღება

ჩვენ style-loaderმიერ ზემოთ დაყენებული კონფიგურაცია მოხერხებულად ასხივებს CSS-ს პაკეტში ისე, რომ CSS ფაილის ხელით ჩატვირთვა dist/index.htmlსაჭირო არ არის. თუმცა, ეს მიდგომა შეიძლება არ იმუშაოს კონტენტის უსაფრთხოების მკაცრი პოლიტიკით და შეიძლება გახდეს თქვენს აპლიკაციაში შეფერხება დიდი პაკეტის ზომის გამო.

CSS-ის გამოსაყოფად ისე, რომ ჩვენ შეგვიძლია მისი ჩატვირთვა პირდაპირ dist/index.html, გამოიყენეთ mini-css-extract-loaderWebpack მოდული.

პირველ რიგში დააინსტალირეთ დანამატი:

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

ხელახლა გაშვების npm run buildშემდეგ გამოჩნდება ახალი ფაილი dist/main.css, რომელიც შეიცავს ყველა CSS-ს, რომელიც იმპორტირებულია src/js/main.js. თუ ახლა dist/index.htmlხედავთ თქვენს ბრაუზერში, სტილი არ იქნება, როგორც ახლა არის dist/main.css. თქვენ შეგიძლიათ შეიტანოთ გენერირებული CSS შემდეგნაირად dist/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 ფაილების ამოღება

Bootstrap-ის CSS მოიცავს მრავალ მითითებას SVG ფაილებზე inline data:URI-ების მეშვეობით. თუ თქვენ განსაზღვრავთ კონტენტის უსაფრთხოების პოლიტიკას თქვენი პროექტისთვის, რომელიც ბლოკავს data:URI-ებს სურათებისთვის, მაშინ ეს SVG ფაილები არ ჩაიტვირთება. ამ პრობლემის თავიდან აცილება შეგიძლიათ შიდა SVG ფაილების ამოღებით Webpack-ის აქტივების მოდულების ფუნქციის გამოყენებით.

დააკონფიგურირეთ Webpack, რომ ამოიღოთ შიდა SVG ფაილები ასე:

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

ხელახლა გაშვების შემდეგ npm run build, თქვენ იპოვით SVG ფაილებს, რომლებიც ამოღებულნი dist/iconsარიან CSS-ში და სათანადოდ მითითებულნი.

ხედავთ რაიმე არასწორი ან მოძველებულია აქ? გთხოვთ გახსენით პრობლემა GitHub-ზე . გჭირდებათ დახმარება პრობლემების აღმოფხვრაში? მოძებნეთ ან დაიწყეთ დისკუსია GitHub-ზე.