درس هجدهم: ترکیب Webpack با Bootstrap

در بسیاری از مواقع مجبور هستیم که تمام برنامه خود را از صفر بنویسیم اما در بسیاری از مواقع دیگر از کتابخانه ها و کدهای آماده استفاده خواهیم کرد. یکی از کتابخانه های بسیار معروف CSS برای استایل دهی، کتابخانه bootstrap است. در قدم اول باید بوت استرپ را نصب کنیم بنابراین دستور زیر را در یک ترمینال اجرا کنید:

npm install bootstrap --save

ما از save-- استفاده می کنیم چرا که بوت استرپ یک وابستگی توسعه (dev dependency) نیست بلکه در محصول نهایی هم استفاده خواهد شد بنابراین باید در bundle نهایی حضور داشته باشد. نسخه کامل بوت استرپ به کتابخانه های jQuery و popper.js نیز نیاز دارد بنابراین با دستور زیر این دو کتابخانه را نیز نصب می کنیم:

npm install --save jquery popper.js

حالا به فایل index.js می رویم و بوت استرپ را درون پروژه اصلی قرار می دهیم.

import HelloWorldButton from './components/hello-world-button/hello-world-button.js';
import Heading from './components/heading/heading.js';
import _ from 'lodash';
import 'bootstrap';

با دستور بالا این کتابخانه را وارد برنامه خود کرده ایم اما حالا باید CSS را نیز وارد کنیم. برای وارد کردن CSS از بوت استرپ دو راه مختلف وجود دارد. اولین راه این است که کدهای SASS (کامپایل نشده) را وارد پروژه کنید. مزیت این گزینه این است که می توانیم تا همیشه از SASS و قابلیت های آن استفاده کنیم. همچنین نیازی به کامپایل کردن جداگانه نداریم می توانیم فایل های خود را درون bundle نهایی قرار بدهیم (webpack خودش همه چیز را انجام می دهد). روش دوم این است که از CSS ساده استفاده کنیم. مثلا اگر با SASS کار می کرده ایم، ابتدا کدهایش را به CSS عادی کامپایل کرده و سپس از آن استفاده کنیم. از آنجایی که روش اول نیاز به پیکربندی خاص دارد من از روش ساده تر استفاده می کنم و کدهای CSS عادی را وارد پروژه خواهم کرد:

import _ from 'lodash';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

حالا برای تست کردن محیط توسعه، به فایل page-template.hbs می رویم و چند کامپوننت بوت استرپ را به آن اضافه می کنیم:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="{{htmlWebpackPlugin.options.description}}">
    <title>{{htmlWebpackPlugin.options.title}}</title>
</head>
<body>
    <div class="alert alert-primary" role="alert">
        This is a primary alert—check it out!
    </div>
</body>

در اینجا می بینید که من یک div با کلاس معروف Alert را اضافه کرده ام. حالا یک منوی آبشاری را نیز اضافه می کنیم:

<body>
    <div class="alert alert-primary" role="alert">
        This is a primary alert—check it out!
    </div>

    <div class="dropdown my-dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</body>

در کدهای بالا my-dropdown کلاس تعریف شده توسط خودم می باشد تا کمی استایل شخصی نیز به منوی آبشاری اضافه کنیم. برای این کار در پوشه src یک فایل دیگر به نام index.scss ایجاد کنید. کدهای من برای این فایل بسیار ساده است:

.my-dropdown {
    float: right;
    position: relative;
    top: 7px;
    right: 40px;
}

حالا به فایل index.js می رویم تا این استایل های جدید را در آن وارد کنیم:

import _ from 'lodash';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';

حالا کدها را ذخیره کرده و دستور زیر را در ترمینال اجرا کنید:

npm run build

با این کار build جدید ما ساخته می شود. حالا npm start را اجرا می کنیم تا برنامه روی سرور اجرا شود. با رفتن به آدرس localhost:3000 می توانید نتیجه را مشاهده کنید. هر دو alert و منوی آبشاری به خوبی کار می کنند.

البته ممکن است بخواهید روش دوم که همان استفاده از SASS بود را نیز بدانید. من این روش را نیز توضیح می دهم. برای انجام این کار باید ابتدا به فایل webpack.production.config.js برویم و قانون فایل های scss را تغییر بدهیم:

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: function () {
                    return [
                        require('precss'),
                        require('autoprefixer')
                    ];
                }
            }
        },
        'sass-loader'
    ]
},

دقت کنید که شیء اضافه شده در وسط این rule یک loader است (دقیقا مانند sass-loader و css-loader) که نامش postcss-loader می باشد (هنوز آن را نصب نکرده ایم). کار این پکیج این است که CSS مدرن و امروزی را به نسخه قدیمی تری از CSS تبدیل کند تا مرورگر های قدیمی نیز بتوانند از آن استفاده کنند. من به این پکیج دو پلاگین داده ام: autoprefixer همانطور که از نامش پیداست، پیشوند های CSS را به صورت خودکار به آن ها اضافه می کند. Precss نیز به ما اجازه می دهد از آخرین قابلیت های CSS (مثل توابع رنگی، خصوصیات منطقی و image set ها و غیره) استفاده کنید. بنابراین باید هر سه پکیج را نصب کنیم. برای این کار ترمینال را باز کرده و دستور زیر را اجرا کنید:

npm install --save-dev postcss-loader autoprefixer precss

حالا که پیکربندی تمام شده است به فایل index.scss می رویم و کدهای CSS بوت استرپ را در آن وارد می کنیم:

@import "~bootstrap/scss/bootstrap";

.my-dropdown {
    float: right;
    position: relative;
    top: 7px;
    right: 40px;
}

حالا به index.js رفته و دستور قبلی که برای وارد کردن CSS عادی بود را حذف می کنیم:

// خط زیر باید حذف شود //
import 'bootstrap/dist/css/bootstrap.min.css';

مثل قبل دستورات npm run build و npm start را اجرا نمایید. اگر به مرورگر بروید هیچ مشکلی نیست و دقیقا همان نتایج قبلی را داریم.

درس هجدهم: ترکیب Webpack با Bootstrap

Combine Webpack with Bootstrap