Bootstrap & Webpack

המדריך הרשמי כיצד לכלול ולצרף את ה-CSS וה-JavaScript של Bootstrap בפרויקט שלך באמצעות Webpack.

בעמוד זה

רוצה לדלג עד הסוף? הורד את קוד המקור ואת ההדגמה העובדת עבור מדריך זה ממאגר twbs/examples . אתה יכול גם לפתוח את הדוגמה ב-StackBlitz לעריכה חיה.

להכין

אנחנו בונים פרויקט Webpack עם Bootstrap מאפס, אז יש כמה דרישות מוקדמות ושלבים מקדימים לפני שנוכל באמת להתחיל. מדריך זה מחייב אותך להתקין את Node.js ולהכיר קצת את הטרמינל.

צור תיקיית פרויקט והגדר את npm. אנו ניצור את my-projectהתיקיה ונאתחל את npm עם -yהארגומנט כדי למנוע ממנו לשאול את כל השאלות האינטראקטיביות.
```
mkdir my-project && cd my-project
npm init -y
```
התקן Webpack. בשלב הבא עלינו להתקין את התלות בפיתוח Webpack שלנו: webpackעבור הליבה של Webpack, webpack-cliכדי שנוכל להריץ פקודות Webpack מהמסוף, webpack-dev-serverוכך נוכל להפעיל שרת פיתוח מקומי. אנו נוהגים --save-devלאותת שהתלות הללו מיועדות רק לשימוש בפיתוח ולא לייצור.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
התקן את Bootstrap. כעת נוכל להתקין את Bootstrap. אנו גם נתקין את Popper מכיוון שהתפריטים הנפתחים, הפופ-אוברים וטיפים שלנו תלויים בו לצורך מיקומם. אם אתה לא מתכנן להשתמש ברכיבים האלה, אתה יכול להשמיט את פופר כאן.
```
npm i --save bootstrap @popperjs/core
```
התקן תלות נוספות. בנוסף ל-Webpack ול-Bootstrap, אנו זקוקים לעוד כמה תלות כדי לייבא ולצרף כראוי את ה-CSS וה-JS של Bootstrap עם 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 ולהפעיל את הפרויקט שלנו באופן מקומי.

פתח webpack.config.jsבעורך שלך. מכיוון שהוא ריק, נצטרך להוסיף לו תצורת תצורת boilerplate כדי שנוכל להפעיל את השרת שלנו. חלק זה של התצורה אומר ש- 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
  }
}
```
לאחר מכן נמלא את 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>שנראה מתי ה-CSS של Bootstrap נטען על ידי Webpack.
עכשיו אנחנו צריכים סקריפט npm כדי להפעיל את Webpack. פתח package.jsonוהוסף את startהסקריפט המוצג למטה (כבר אמור להיות לך את סקריפט הבדיקה). אנו נשתמש בסקריפט זה כדי להפעיל את שרת הפיתוח המקומי של Webpack.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ולבסוף, אנחנו יכולים להתחיל Webpack. my-projectמהתיקיה בטרמינל שלך, הפעל את הסקריפט החדש של npm שנוסף :
```
npm start
```

בחלק הבא והאחרון של המדריך הזה, נגדיר את מעמיסי ה-Webpack וייבא את כל ה-CSS וה-JavaScript של Bootstrap.

ייבוא Bootstrap

ייבוא Bootstrap ל-Webpack דורש את המעמיסים שהתקנו בסעיף הראשון. התקנו אותם עם npm, אבל כעת יש להגדיר את Webpack לשימוש בהם.

הגדר את המעמיסים ב 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 <style>לאלמנט <head>בדף ה-HTML, css-loaderעוזר בשימוש ב @import-ו url(), postcss-loaderנדרש עבור Autoprefixer, sass-loaderומאפשר לנו להשתמש ב-Sass.

כעת, בואו לייבא את ה-CSS של Bootstrap. הוסף את הדברים הבאים src/scss/styles.scssכדי לייבא את כל המקור Sass של Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
אתה יכול גם לייבא את גיליונות הסגנונות שלנו בנפרד אם תרצה. קרא את מסמכי הייבוא של Sass לקבלת פרטים.
לאחר מכן נטען את ה-CSS ונייבא את ה-JavaScript של Bootstrap. הוסף את הדברים הבאים src/js/main.jsכדי לטעון את ה-CSS ולייבא את כל ה-JS של Bootstrap. 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'
```
קרא את מסמכי JavaScript שלנו למידע נוסף על אופן השימוש בתוספים של Bootstrap.
וסיימת! 🎉 כשהמקור Sass ו-JS של Bootstrap נטענים במלואם, שרת הפיתוח המקומי שלך אמור כעת להיראות כך.

עכשיו אתה יכול להתחיל להוסיף כל רכיבי Bootstrap שאתה רוצה להשתמש בו. הקפד לבדוק את פרויקט הדוגמה המלא של Webpack כיצד לכלול Sass מותאם אישית נוסף ולמטב את המבנה שלך על ידי ייבוא רק את החלקים של ה-CSS וה-JS של Bootstrap שאתה צריך.

אופטימיזציות של ייצור

בהתאם להגדרה שלך, ייתכן שתרצה ליישם כמה אופטימיזציות נוספות של אבטחה ומהירות שימושיות להפעלת הפרויקט בייצור. שים לב שהאופטימיזציות הללו אינן מיושמות בפרויקט לדוגמה של Webpack והן תלויות בך ליישם.

חילוץ CSS

ההגדרה style-loaderשקבענו לעיל פולטת CSS בצורה נוחה לחבילה כך שאין צורך בטעינה ידנית של קובץ CSS dist/index.html. עם זאת, ייתכן שגישה זו לא תעבוד עם מדיניות אבטחת תוכן קפדנית, והיא עלולה להפוך לצוואר בקבוק באפליקציה שלך בשל גודל החבילה הגדול.

כדי להפריד את ה-CSS כך שנוכל לטעון אותו ישירות מ- dist/index.html, השתמש mini-css-extract-loaderבתוסף Webpack.

ראשית, התקן את הפלאגין:

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

ה-CSS של Bootstrap כולל הפניות מרובות לקובצי SVG באמצעות data:URIs מוטבעים. אם תגדיר מדיניות אבטחת תוכן עבור הפרויקט שלך שחוסמת data:URIs עבור תמונות, אז קבצי 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/iconsCSS והתייחס אליהם כראוי.

רואה כאן משהו לא בסדר או לא מעודכן? אנא פתח בעיה ב-GitHub . זקוק לעזרה בפתרון תקלות? חפש או התחל דיון ב-GitHub.