اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
Check
in English

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

د ویبپیک په کارولو سره ستاسو په پروژه کې د بوټسټریپ CSS او جاواسکریپټ شاملولو او بنډل کولو څرنګوالي لپاره رسمي لارښود.

په دې پاڼه کې
غواړئ چې پای ته ورسیږئ؟ د دې لارښود لپاره د سرچینې کوډ او کاري ډیمو ډاونلوډ کړئ د twbs/examples repository څخه . تاسو کولی شئ د ژوندی ترمیم لپاره په StackBlitz کې مثال هم خلاص کړئ .

چمتو کول

موږ له سکریچ څخه د بوټسټریپ سره د ویب پیک پروژه رامینځته کوو ، نو دلته ځینې شرایط شتون لري او مخکې له دې چې موږ واقعیا پیل وکړو. دا لارښود تاسو ته اړتیا لري چې Node.js نصب کړئ او د ټرمینل سره یو څه پیژندنه ولرئ.

  1. د پروژې فولډر جوړ کړئ او npm تنظیم کړئ. موږ به my-projectفولډر جوړ کړو او د استدلال سره npm پیل -yکړو ترڅو له موږ څخه د ټولو متقابلو پوښتنو څخه مخنیوی وشي.

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

  2. Webpack نصب کړئ. بیا موږ اړتیا لرو چې زموږ د ویبپیک پراختیا انحصارونه نصب کړو: webpackد ویبپیک اصلي لپاره، webpack-cliنو موږ کولی شو د ټرمینل څخه د ویبپیک کمانډونه پرمخ یوسو، او webpack-dev-serverله دې امله موږ کولی شو د محلي پراختیا سرور پرمخ یوسو. موږ --save-devد سیګنال لپاره کاروو چې دا انحصار یوازې د پراختیا کارونې لپاره دي نه د تولید لپاره.

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

  3. بوټسټریپ نصب کړئ. اوس موږ کولی شو بوټسټریپ نصب کړو. موږ به پوپر هم نصب کړو ځکه چې زموږ ډراپ ډاونونه، پاپورونه، او اوزار ټیپونه د دوی موقعیت لپاره پدې پورې اړه لري. که تاسو د دې اجزاوو کارولو پلان نه لرئ، تاسو کولی شئ دلته پوپر پریږدئ.

    npm i --save bootstrap @popperjs/core

  4. اضافي انحصارونه نصب کړئ. د ویبپیک او بوټسټریپ سربیره، موږ یو څو نورو انحصارونو ته اړتیا لرو ترڅو د بوټسټریپ CSS او JS د Webpack سره په سمه توګه وارد او بنډل کړو. پدې کې Sass، ځینې لوډر، او Autoprefixer شامل دي.

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

اوس چې موږ ټول اړین انحصارونه نصب کړي ، موږ کولی شو د پروژې فایلونو رامینځته کولو او د بوټسټریپ واردولو کار ته ورسیږو.

د پروژې جوړښت

موږ لا دمخه 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.config.jsتر اوسه خپل ډک نه دی کړی.

ویبپیک تنظیم کړئ

د انحصارونو نصبولو سره او زموږ د پروژې فولډر زموږ لپاره د کوډ کولو پیل کولو لپاره چمتو دی ، موږ اوس کولی شو ویبپیک تنظیم کړو او زموږ پروژه په ځایی ډول پرمخ یوسو.

  1. webpack.config.jsپه خپل مدیر کې خلاص کړئ. ځکه چې دا خالي دی، موږ به اړتیا ولرو چې یو څه د بویلر پلیټ تشکیلات اضافه کړو نو موږ کولی شو خپل سرور پیل کړو. د ترتیب دا برخه ویبپیک ته وایی چې زموږ د پروژې جاواسکریپټ په لټه کې و ، چیرې چې د کمپل شوي کوډ ( 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>له همدې امله موږ وګورو کله چې د بوټسټریپ CSS د ویبپیک لخوا پورته کیږي.

  3. اوس موږ د ویبپیک چلولو لپاره د npm سکریپټ ته اړتیا لرو. لاندې ښودل شوی سکریپټ خلاص package.jsonکړئ او اضافه startکړئ (تاسو باید دمخه د ازموینې سکریپټ ولرئ). موږ به دا سکریپټ زموږ د محلي ویب پیک دیو سرور پیل کولو لپاره وکاروو.

    {
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

  4. او په نهایت کې ، موږ کولی شو ویبپیک پیل کړو. ستاسو په ټرمینل کې د my-projectفولډر څخه، دا نوی اضافه شوی npm سکریپټ چل کړئ:

    npm start
    د ویب پیک ډیویډ سرور روان دی

د دې لارښود په راتلونکې او وروستۍ برخه کې، موږ به د ویب پیک لوډر تنظیم کړو او د بوټسټریپ ټول CSS او جاواسکریپټ وارد کړو.

بوټسټریپ وارد کړئ

په 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-loaderCSS داخلوي ، په کارولو کې مرسته کوي او د Autoprefixer لپاره اړین دی، او موږ ته اجازه راکوي چې د Sass کارولو لپاره.<style><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 پورته کوو او د بوټسټریپ جاوا سکریپټ واردوو. د CSS پورته کولو لپاره لاندې اضافه کړئ src/js/main.jsاو د بوټسټریپ ټول 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. او تاسو بشپړ شوي! 🎉 د بوټسټریپ سرچینې ساس او JS په بشپړ ډول بار شوي سره ، ستاسو سیمه ایز پرمختیایی سرور باید اوس داسې ښکاري.

    د ویب پیک دیو سرور د بوټسټریپ سره روان دی

    اوس تاسو کولی شئ د بوټسټریپ هرې برخې اضافه کول پیل کړئ چې تاسو یې کارول غواړئ. ډاډ ترلاسه کړئ چې د بشپړ ویبپیک مثال پروژه وګورئ چې څنګه اضافي دودیز ساس شامل کړئ او یوازې د بوټسټریپ CSS او JS برخې واردولو سره خپل جوړښت غوره کړئ چې تاسو ورته اړتیا لرئ.

د تولید اصلاح کول

ستاسو په ترتیب پورې اړه لري، تاسو ممکن غواړئ ځینې اضافي امنیت او سرعت اصلاحونه پلي کړئ چې په تولید کې د پروژې چلولو لپاره ګټور دي. په یاد ولرئ چې دا اصلاحات د ویب پیک مثال پروژې کې ندي پلي شوي او پلي کول یې تاسو پورې اړه لري.

د سی ایس ایس استخراج

هغه style-loaderڅه چې موږ پورته ترتیب کړي په اسانۍ سره بنډل ته CSS جذبوي نو په لاسي ډول د CSS فایل پورته کول dist/index.htmlاړین ندي. دا طریقه ممکن د محتوياتو د خوندیتوب سختې پالیسۍ سره کار ونکړي، په هرصورت، او دا ممکن ستاسو په غوښتنلیک کې د لوی بنډل اندازې له امله خنډ شي.

dist/index.htmlد CSS جلا کولو لپاره چې موږ وکولی شو دا په مستقیم ډول له 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، کوم چې به د سی ایس ایس لخوا وارد شوي ټول ولري 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 فایلونو استخراج

data:د بوټسټراپ سی ایس ایس د انلاین URIs له لارې د SVG فایلونو ته ډیری حوالې شاملې دي . که تاسو د خپلې پروژې لپاره د مینځپانګې امنیت پالیسي تعریف کړئ چې data:د عکسونو لپاره URIs بندوي ، نو دا SVG فایلونه به پورته نشي. تاسو کولی شئ د دې ستونزې په شاوخوا کې د ویبپیک د شتمنیو ماډلونو ځانګړتیا په کارولو سره د انلاین SVG فایلونو استخراج له لارې ترلاسه کړئ.

د دې په څیر د انلاین 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 کې بحث وپلټئ یا پیل کړئ .