مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
Check
in English

بوٹسٹریپ اور ویب پیک

Webpack کا استعمال کرتے ہوئے اپنے پروجیکٹ میں Bootstrap کے CSS اور JavaScript کو شامل اور بنڈل کرنے کے بارے میں سرکاری رہنما۔

اس صفحہ پر
آخر تک جانا چاہتے ہیں؟ twbs/examples repository سے اس گائیڈ کے لیے سورس کوڈ اور ورکنگ ڈیمو ڈاؤن لوڈ کریں ۔ آپ لائیو ایڈیٹنگ کے لیے StackBlitz میں مثال بھی کھول سکتے ہیں۔

سیٹ اپ

ہم شروع سے Bootstrap کے ساتھ ایک Webpack پروجیکٹ بنا رہے ہیں، لہذا اس سے پہلے کہ ہم واقعی شروع کر سکیں کچھ شرائط اور آگے کے اقدامات ہیں۔ اس گائیڈ کے لیے آپ کو Node.js انسٹال کرنے اور ٹرمینل سے کچھ واقفیت کی ضرورت ہے۔

  1. ایک پروجیکٹ فولڈر بنائیں اور این پی ایم سیٹ اپ کریں۔ ہم my-projectفولڈر بنائیں گے اور npm کو -yدلیل کے ساتھ شروع کریں گے تاکہ ہم سے تمام انٹرایکٹو سوالات پوچھنے سے بچ سکیں۔

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

  2. ویب پیک انسٹال کریں۔ اس کے بعد ہمیں اپنی Webpack ڈویلپمنٹ انحصار کو انسٹال کرنے کی ضرورت ہے: webpackWebpack کے بنیادی حصے کے لیے، webpack-cliتاکہ ہم ٹرمینل سے Webpack کمانڈز چلا سکیں، اور webpack-dev-serverاس طرح ہم مقامی ترقیاتی سرور چلا سکیں۔ ہم --save-devیہ اشارہ کرنے کے لیے استعمال کرتے ہیں کہ یہ انحصار صرف ترقیاتی استعمال کے لیے ہیں نہ کہ پیداوار کے لیے۔

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

  3. بوٹسٹریپ انسٹال کریں۔ اب ہم بوٹسٹریپ انسٹال کر سکتے ہیں۔ ہم Popper کو بھی انسٹال کریں گے کیونکہ ہمارے ڈراپ ڈاؤن، پاپ اوور، اور ٹول ٹپس ان کی پوزیشننگ کے لیے اس پر منحصر ہیں۔ اگر آپ ان اجزاء کو استعمال کرنے کا ارادہ نہیں رکھتے ہیں، تو آپ یہاں 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

اب جب کہ ہمارے پاس تمام ضروری انحصار انسٹال ہیں، ہم پروجیکٹ فائلوں کو بنانے اور بوٹسٹریپ کو درآمد کرنے کا کام کر سکتے ہیں۔

پروجیکٹ کا ڈھانچہ

ہم پہلے ہی my-projectفولڈر بنا چکے ہیں اور این پی ایم کو شروع کر چکے ہیں۔ اب ہم پروجیکٹ کے ڈھانچے کو راؤنڈ آؤٹ کرنے کے لیے اپنے 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 کو ترتیب دے سکتے ہیں اور اپنے پروجیکٹ کو مقامی طور پر چلا سکتے ہیں۔

  1. webpack.config.jsاپنے ایڈیٹر میں کھولیں ۔ چونکہ یہ خالی ہے، ہمیں اس میں کچھ بوائلر پلیٹ کنفیگریشن شامل کرنے کی ضرورت ہوگی تاکہ ہم اپنا سرور شروع کر سکیں۔ تشکیل کا یہ حصہ 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
  }
}

  2. اگلا ہم اپنے میں بھرتے ہیں dist/index.html۔ یہ HTML صفحہ ہے Webpack بنڈل CSS اور JS کو استعمال کرنے کے لیے براؤزر میں لوڈ ہو گا جسے ہم بعد کے مراحل میں شامل کریں گے۔ اس سے پہلے کہ ہم ایسا کر سکیں، ہمیں اسے رینڈر کرنے اور outputپچھلے مرحلے سے JS کو شامل کرنے کے لیے کچھ دینا ہوگا۔

    <!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>ہم دیکھیں کہ بوٹسٹریپ کا سی ایس ایس کب ویب پیک کے ذریعے لوڈ ہوتا ہے۔

  3. اب ہمیں Webpack چلانے کے لیے ایک npm اسکرپٹ کی ضرورت ہے۔ نیچے دکھائی گئی اسکرپٹ کو کھولیں 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 لوڈرز مرتب کریں گے اور بوٹسٹریپ کے تمام CSS اور JavaScript کو درآمد کریں گے۔

بوٹسٹریپ درآمد کریں۔

بوٹسٹریپ کو 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'
          }
        ]
      }
    ]
  }
}

    ہمیں ان تمام لوڈرز کی ضرورت کیوں ہے اس کا ایک خلاصہ یہ ہے۔ سی ایس ایس کو HTML صفحہ کے style-loaderایک <style>عنصر میں داخل کرتا ہے، استعمال کرنے میں مدد کرتا ہے اور , Autoprefixer کے لیے ضروری ہے، اور ہمیں Sass استعمال کرنے کی اجازت دیتا ہے۔<head>css-loader@importurl()postcss-loadersass-loader

  2. اب، بوٹسٹریپ کا سی ایس ایس درآمد کرتے ہیں۔ src/scss/styles.scssبوٹسٹریپ کے تمام سورس ساس کو درآمد کرنے کے لیے درج ذیل کو شامل کریں ۔

    // Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

    اگر آپ چاہیں تو آپ انفرادی طور پر ہماری اسٹائل شیٹس بھی درآمد کر سکتے ہیں۔ تفصیلات کے لیے ہماری Sass درآمدی دستاویزات پڑھیں ۔

  3. اس کے بعد ہم CSS لوڈ کرتے ہیں اور بوٹسٹریپ کا جاوا اسکرپٹ درآمد کرتے ہیں۔ src/js/main.jsسی ایس ایس کو لوڈ کرنے اور بوٹسٹریپ کے تمام جے ایس کو درآمد کرنے کے لیے درج ذیل کو شامل کریں ۔ پوپر بوٹسٹریپ کے ذریعے خود بخود درآمد ہو جائے گا۔

    // 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'

    بوٹسٹریپ کے پلگ انز کو استعمال کرنے کے طریقے کے بارے میں مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات پڑھیں ۔

  4. اور آپ کا کام ہو گیا! 🎉 بوٹسٹریپ کے سورس Sass اور JS کے مکمل طور پر لوڈ ہونے کے ساتھ، آپ کا لوکل ڈویلپمنٹ سرور اب ایسا نظر آنا چاہیے۔

    ویب پیک ڈیو سرور بوٹسٹریپ کے ساتھ چل رہا ہے۔

    اب آپ بوٹسٹریپ کے کسی بھی اجزاء کو شامل کرنا شروع کر سکتے ہیں جسے آپ استعمال کرنا چاہتے ہیں۔ اضافی کسٹم ساس کو شامل کرنے اور بوٹسٹریپ کے سی ایس ایس اور جے ایس کے صرف ان حصوں کو درآمد کرکے اپنی تعمیر کو بہتر بنانے کے لیے مکمل Webpack مثال کے پروجیکٹ کو ضرور دیکھیں جن کی آپ کو ضرورت ہے۔

پیداوار کی اصلاح

آپ کے سیٹ اپ پر منحصر ہے، آپ پروڈکشن میں پروجیکٹ کو چلانے کے لیے مفید کچھ اضافی سیکیورٹی اور رفتار کی اصلاح کو لاگو کرنا چاہیں گے۔ نوٹ کریں کہ یہ اصلاحیں Webpack مثال کے منصوبے پر لاگو نہیں ہوتی ہیں اور ان پر عمل درآمد آپ پر منحصر ہے۔

CSS نکالنا

ہم نے style-loaderاوپر جو ترتیب دیا ہے وہ آسانی سے بنڈل میں CSS کا اخراج کرتا ہے تاکہ CSS فائل کو دستی طور پر لوڈ dist/index.htmlکرنا ضروری نہ ہو۔ یہ طریقہ ایک سخت مواد کی حفاظتی پالیسی کے ساتھ کام نہیں کر سکتا، تاہم، اور بنڈل کے بڑے سائز کی وجہ سے یہ آپ کی درخواست میں رکاوٹ بن سکتا ہے۔

CSS کو الگ کرنے کے لیے تاکہ ہم اسے براہ راست سے لوڈ کر سکیں ، Webpack پلگ ان dist/index.htmlکا استعمال کریں ۔mini-css-extract-loader

سب سے پہلے، پلگ ان انسٹال کریں:

npm install --save-dev mini-css-extract-plugin

پھر ویب پیک کنفیگریشن میں پلگ ان کو فوری اور استعمال کریں:

--- 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۔ آپ تیار کردہ سی ایس ایس کو 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 فائلیں نکالنا

data:بوٹسٹریپ کے سی ایس ایس میں ان لائن URIs کے ذریعے SVG فائلوں کے متعدد حوالہ جات شامل ہیں ۔ اگر آپ اپنے پروجیکٹ کے لیے مواد کی حفاظت کی پالیسی کی وضاحت کرتے ہیں جو data:تصاویر کے لیے URIs کو روکتی ہے، تو یہ SVG فائلیں لوڈ نہیں ہوں گی۔ آپ Webpack کے اثاثہ ماڈیولز کی خصوصیت کا استعمال کرتے ہوئے ان لائن SVG فائلوں کو نکال کر اس مسئلے کو حل کر سکتے ہیں۔

ان لائن SVG فائلوں کو اس طرح نکالنے کے لیے Webpack کو ترتیب دیں:

--- 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 پر تلاش کریں یا بحث شروع کریں ۔