Bootstrap & Webpack

الدليل الرسمي لكيفية تضمين وتجميع CSS و JavaScript من Bootstrap في مشروعك باستخدام Webpack.

على هذه الصفحة

هل تريد التخطي حتى النهاية؟ قم بتنزيل الكود المصدري والعرض التوضيحي العملي لهذا الدليل من مستودع twbs / أمثلة . يمكنك أيضًا فتح المثال في 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 نظرًا لأن القوائم المنسدلة والقوائم المنبثقة وتلميحات الأدوات الخاصة بنا تعتمد عليها في تحديد المواقع الخاصة بها. إذا كنت لا تخطط لاستخدام هذه المكونات ، فيمكنك حذف 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.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
  }
}
```
بعد ذلك نملأ 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 dev المحلي الخاص بنا.
```
{
  // ...
  "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 واستيراد كل من Bootstrap's 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'
```
اقرأ مستندات JavaScript الخاصة بنا للحصول على مزيد من المعلومات حول كيفية استخدام ملحقات Bootstrap.
وانت انتهيت! 🎉 مع تحميل Sass و JS لمصدر Bootstrap بالكامل ، يجب أن يبدو خادم التطوير المحلي لديك الآن بهذا الشكل.

يمكنك الآن البدء في إضافة أي مكونات Bootstrap تريد استخدامها. تأكد من إطلاعك على مثال مشروع Webpack الكامل لمعرفة كيفية تضمين Sass مخصص إضافي وتحسين التصميم الخاص بك عن طريق استيراد أجزاء من Bootstrap's CSS و JS التي تحتاجها فقط.

تحسينات الإنتاج

اعتمادًا على الإعداد الخاص بك ، قد ترغب في تنفيذ بعض تحسينات الأمان والسرعة الإضافية المفيدة لتشغيل المشروع في الإنتاج. لاحظ أن هذه التحسينات لا يتم تطبيقها على مثال مشروع 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: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.