بوت استرپ و پک وب

راهنمای رسمی نحوه گنجاندن و بسته‌بندی CSS و جاوا اسکریپت Bootstrap در پروژه خود با استفاده از Webpack.

در این صفحه

آیا می خواهید به پایان بروید؟ کد منبع و نسخه آزمایشی این راهنما را از مخزن twbs/examples دانلود کنید . همچنین می توانید مثال را در StackBlitz برای ویرایش زنده باز کنید.

برپایی

ما در حال ساخت یک پروژه Webpack با بوت استرپ از ابتدا هستیم، بنابراین پیش نیازها و مراحل اولیه قبل از شروع واقعی وجود دارد. این راهنما به شما نیاز دارد که 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
```
بوت استرپ را نصب کنید. اکنون می توانیم بوت استرپ را نصب کنیم. ما همچنین 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 را پیکربندی کرده و پروژه خود را به صورت محلی اجرا کنیم.

webpack.config.jsدر ویرایشگر خود باز کنید. از آنجایی که خالی است، باید مقداری پیکربندی boilerplate را به آن اضافه کنیم تا بتوانیم سرور خود را راه اندازی کنیم. این قسمت از پیکربندی به Webpack می گوید که باید به دنبال جاوا اسکریپت پروژه ما باشد، کد کامپایل شده را در کجا خروجی ( 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>
```
ما در اینجا کمی از استایل بوت استرپ را با div class="container"و <button>به این ترتیب اضافه می کنیم تا ببینیم چه زمانی CSS بوت استرپ توسط Webpack بارگذاری می شود.
اکنون برای اجرای Webpack به یک اسکریپت npm نیاز داریم. اسکریپت زیر را باز 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 و جاوا اسکریپت 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-loaderCSS را به <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 را بارگذاری کرده و جاوا اسکریپت 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'
```
همچنین می‌توانید در صورت نیاز، افزونه‌های جاوا اسکریپت را به صورت جداگانه وارد کنید تا اندازه بسته‌ها کاهش یابد:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
برای اطلاعات بیشتر در مورد نحوه استفاده از افزونه های بوت استرپ، اسناد جاوا اسکریپت ما را بخوانید .
و شما تمام شده اید! 🎉 با بارگیری کامل منبع Bootstrap Sass و JS، سرور توسعه محلی شما اکنون باید به این شکل باشد.

اکنون می توانید شروع به اضافه کردن هر مؤلفه بوت استرپ کنید که می خواهید استفاده کنید. حتماً پروژه نمونه کامل 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 بوت استرپ شامل چندین ارجاع به فایل های SVG از طریق 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/iconsCSS استخراج شده و به درستی از آنها ارجاع داده شده اند.

مشکلی در اینجا می بینید یا قدیمی است؟ لطفاً یک مشکل را در GitHub باز کنید. برای عیب یابی به کمک نیاز دارید؟ جستجو یا شروع یک بحث در GitHub.