Гузаштан ба мундариҷаи асосӣ Ба паймоиши ҳуҷҷатҳо гузаред
Check
in English

Bootstrap & Webpack

Дастури расмӣ дар бораи чӣ гуна дохил кардан ва бастани CSS ва JavaScript-и Bootstrap дар лоиҳаи худ бо истифода аз Webpack.

Дар ин саҳифа
Мехоҳед то ба охир гузаред? Рамзи манбаъ ва намоиши кории ин дастурро аз анбори twbs/examples зеркашӣ кунед . Шумо инчунин метавонед мисолро дар StackBlitz барои таҳрири зинда кушоед.

Ташкил кардан

Мо лоиҳаи Webpack-ро бо Bootstrap аз сифр сохта истодаем, бинобар ин пеш аз он ки мо воқеан оғоз кунем, баъзе шартҳо ва қадамҳои пешакӣ мавҷуданд. Ин дастур аз шумо талаб мекунад, ки Node.js насб карда бошед ва каме шиносоӣ бо терминал дошта бошед.

  1. Папкаи лоиҳа эҷод кунед ва npm-ро насб кунед. Мо my-projectпапкаро эҷод мекунем ва npm-ро бо -yаргумент оғоз мекунем, то он ба мо ҳама саволҳои интерактивиро надиҳад.

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

  2. Webpack насб кунед. Минбаъд мо бояд вобастагии рушди Webpack-и худро насб кунем: webpackбарои асосии Webpack, webpack-cliто мо метавонем фармонҳои Webpack-ро аз терминал иҷро кунем ва аз webpack-dev-serverин рӯ мо метавонем сервери рушди маҳаллиро иҷро кунем. Мо --save-devба он ишора мекунем, ки ин вобастагӣ танҳо барои истифодаи рушд аст, на барои истеҳсол.

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

  3. Bootstrap-ро насб кунед. Акнун мо метавонем Bootstrap-ро насб кунем. Мо инчунин Попперро насб мекунем, зеро афтандаҳо, поповерҳо ва маслиҳатҳои асбобҳои мо барои ҷойгиркунии онҳо аз он вобастаанд. Агар шумо нақшаи истифодаи ин ҷузъҳоро надошта бошед, шумо метавонед Попперро дар ин ҷо гузоред.

    npm i --save bootstrap @popperjs/core

  4. Вобастагии иловагӣ насб кунед. Илова ба 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-ро танзим кунем ва лоиҳаи худро ба таври маҳаллӣ иҷро кунем.

  1. 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
  }
}

  2. Минбаъд мо хати худро пур мекунем 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 бор карда мешавад.

  3. Ҳоло ба мо скрипти npm лозим аст, то Webpack-ро иҷро кунем. Скрипти дар зер нишон додашударо кушоед 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
    Сервери dev Webpack кор мекунад

Дар бахши навбатӣ ва ниҳоии ин дастур, мо боркунакҳои Webpack насб мекунем ва ҳамаи CSS ва JavaScript-и Bootstrap-ро ворид мекунем.

Воридоти Bootstrap

Воридоти Bootstrap ба 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'
          }
        ]
      }
    ]
  }
}

    Ин аст як хулосаи он, ки чаро мо ба ҳамаи ин боркунакҳо ниёз дорем. style-loaderCSS-ро ба <style>унсури <head>саҳифаи HTML ворид css-loaderмекунад, дар истифодаи @importва url(), postcss-loaderбарои Autoprefixer лозим аст ва sass-loaderба мо имкон медиҳад, ки Sass-ро истифода барем.

  2. Акнун биёед CSS-и Bootstrap-ро ворид кунем. Барои src/scss/styles.scssворид кардани тамоми манбаи Bootstrap Sass, зеринро илова кунед.

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

    Агар хоҳед, шумо инчунин метавонед ҷадвалҳои услубҳои моро ба таври инфиродӣ ворид кунед. Барои тафсилот ҳуҷҷатҳои воридотии Sass-и моро хонед .

  3. Баъдан мо CSS-ро бор мекунем ва JavaScript-и Bootstrap-ро ворид мекунем. Барои src/js/main.jsбор кардани CSS ва ворид кардани тамоми JS Bootstrap, зеринро илова кунед. Поппер ба таври худкор тавассути 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'

    Барои маълумоти бештар дар бораи чӣ гуна истифода бурдани плагинҳои Bootstrap, ҳуҷҷатҳои JavaScript-и моро хонед .

  4. Ва шумо тамом шудед! 🎉 Бо манбаи Sass Bootstrap ва JS пурра бор карда шудааст, сервери рушди маҳаллии шумо акнун бояд чунин бошад.

    Сервери dev Webpack бо Bootstrap кор мекунад

    Акнун шумо метавонед ба илова кардани ҳама ҷузъҳои Bootstrap, ки мехоҳед истифода баред, оғоз кунед. Боварӣ ҳосил кунед, ки лоиҳаи пурраи намунаи Webpack-ро барои дохил кардани Sass-и фармоишии иловагӣ ва оптимизатсияи сохтани худ тавассути ворид кардани танҳо қисмҳои CSS ва JS Bootstrap, ки ба шумо лозим аст, тафтиш кунед.

Оптимизатсияи истеҳсолот

Вобаста ба танзимоти худ, шумо метавонед баъзе оптимизатсияҳои иловагии амният ва суръатро барои татбиқи лоиҳа дар истеҳсолот истифода баред. Аҳамият диҳед, ки ин оптимизатсияҳо дар лоиҳаи намунавии Webpack татбиқ карда намешаванд ва татбиқи он ба шумо вобаста аст.

Истихроҷи CSS

Оне style-loader, ки мо дар боло танзим карда будем, ба таври қулай CSS-ро ба баста мебарорад, то ба таври дастӣ бор кардани файли CSS дар dist/index.htmlон шарт нест. Бо вуҷуди ин, ин равиш метавонад бо Сиёсати қатъии Амнияти мундариҷа кор накунад ва он метавонад ба сабаби андозаи калони баста дар барномаи шумо монеа шавад.

dist/index.htmlБарои ҷудо кардани CSS, то ки мо онро мустақиман аз mini-css-extract-loader.

Аввалан, плагинро насб кунед:

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: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/iconsаз CSS истихроҷ карда шудаанд ва дуруст истинод карда шудаанд.

Дар ин ҷо ягон чизи нодуруст ё кӯҳнаро мебинед? Лутфан як масъаларо дар GitHub кушоед . Барои бартараф кардани мушкилот кӯмак лозим аст? Дар GitHub ҷустуҷӯ ё муҳокима оғоз кунед .