Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Bootstrap & Webpack

Webpack аркылуу долбооруңузга Bootstrap'тин CSS жана JavaScriptти кантип кошуу жана таңгактоо боюнча расмий колдонмо.

Бул бетте
Аягына чейин өткүңүз келеби? Бул колдонмонун баштапкы кодун жана жумушчу демонстрациясын twbs/examples репозиторийинен жүктөп алыңыз . Ошондой эле түз түзөтүү үчүн мисалды StackBlitzте ачсаңыз болот.

Жайгашуу

Биз Bootstrap менен Webpack долбоорун нөлдөн баштап куруп жатабыз, андыктан чындап баштоого чейин кээ бир шарттар жана алдыңкы кадамдар бар. Бул колдонмо сизден 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'тен тышкары, Bootstrap'тин CSS жана JS'терин 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ди колдонуу үчүн браузерге жүктөлөт, биз ага кийинки кадамдарда кошобуз. Муну жасоодон мурун, биз ага 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>

    Биз бул жерде Bootstrap стилин бир аз кошуп жатабыз div class="container"жана <button>Bootstrap'тын CSS качан Webpack тарабынан жүктөлгөнүн көрөбүз.

  3. Эми Webpack иштетүү үчүн бизге npm скрипт керек. Төмөндө көрсөтүлгөн скриптти ачып package.json, кошуңуз start(сизде тест скрипт болушу керек). Бул скриптти жергиликтүү Webpack dev серверибизди баштоо үчүн колдонобуз.

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

  4. Акыр-аягы, биз Webpack баштай алабыз. my-projectТерминалыңыздагы папкадан жаңы кошулган npm скриптин иштетиңиз :

    npm start
    Webpack dev сервери иштеп жатат

Бул колдонмонун кийинки жана акыркы бөлүмүндө биз Webpack жүктөгүчтөрдү орнотобуз жана бардык Bootstrap CSS жана JavaScript импорттойбуз.

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'
          }
        ]
      }
    ]
  }
}

    Бул жүктөгүчтөрдүн бардыгы эмне үчүн керек экенин кыскача карап көрөлү. HTML баракчасынын элементине style-loaderCSS инжекциялайт, жана колдонууга жардам берет , Autoprefixer үчүн талап кылынат жана бизге Sass колдонууга мүмкүндүк берет.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. Эми, келгиле, Bootstrap CSS импорттойлу. src/scss/styles.scssБардык Bootstrap булагы Sass импорттоо үчүн төмөнкүнү кошуңуз .

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

    Кааласаңыз, стилдер жадыбалыбызды өз алдынча импорттой аласыз. Чоо-жайын билүү үчүн Sass импорттук документтерибизди окуңуз .

  3. Андан кийин биз CSSти жүктөйбүз жана Bootstrap'тин JavaScript'ин импорттойбуз. src/js/main.jsCSSти жүктөө жана бардык Bootstrap'тин JS импорттоо үчүн төмөнкүнү кошуңуз . Поппер автоматтык түрдө 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. А сен бүттүң! 🎉 Bootstrap булагы Sass жана JS толук жүктөлгөндө, сиздин жергиликтүү өнүктүрүү сервериңиз азыр ушундай болушу керек.

    Bootstrap менен иштеген Webpack dev сервери

    Эми сиз колдонгуңуз келген каалаган Bootstrap компоненттерин кошо баштасаңыз болот. Кошумча ыңгайлаштырылган Sass кошуу жана Bootstrap'тын CSS жана JS бөлүктөрүн гана импорттоо менен түзүлүшүңүздү оптималдаштыруу үчүн толук Webpack мисал долбоорун текшерип көрүңүз .

Өндүрүштү оптималдаштыруу

Орнотууңузга жараша, сиз өндүрүштө долбоорду иштетүү үчүн пайдалуу кээ бир кошумча коопсуздукту жана ылдамдыкты оптималдаштырууну ишке ашыргыңыз келиши мүмкүн. Бул оптималдаштыруулар Webpack үлгүсүндөгү долбоордо колдонулбайт жана аларды ишке ашыруу сизден көз каранды экенин эске алыңыз.

CSS чыгарылууда

Биз style-loaderжогоруда конфигурациялаганыбыз CSS файлын кол менен жүктөөнүн dist/index.htmlкереги жок болушу үчүн таңгакка CSSти ыңгайлуу чыгарат. Бул ыкма катуу Мазмунду Коопсуздук Саясаты менен иштебеши мүмкүн жана таңгактын чоңдугуна байланыштуу колдонмоңузда тоскоолдук болуп калышы мүмкүн.

CSSти биз аны түз жүктөй тургандай кылып бөлүү dist/index.htmlүчүн, mini-css-extract-loaderWebpack плагинин колдонуңуз.

Биринчиден, плагинди орнотуу:

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
           },
           {

Кайра иштетилгенден кийин, импорттолгон бардык CSS файлдарын камтыган npm run buildжаңы файл пайда болот . Эгер сиз азыр браузериңизден көрсөңүз, стил азыр . Түзүлгөн CSSти төмөнкүдөй кошсоңуз болот :dist/main.csssrc/js/main.jsdist/index.htmldist/main.cssdist/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 файлдары чыгарылууда

Bootstrap's CSS SVG файлдарына бир нече шилтемелерди камтыйт data:. Сүрөттөр үчүн URI'лерди бөгөттөп турган долбооруңуз үчүн Мазмундун Коопсуздук Саясатын аныктасаңыз data:, анда бул SVG файлдары жүктөлбөйт. Бул көйгөйдү Webpack'тин активдик модулдар өзгөчөлүгүн колдонуп, линиядагы 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: [

Кайра иштеткенден кийин, сиз CSSке алынган жана туура шилтеме берилген npm run buildSVG файлдарын табасыз .dist/icons

Бул жерден туура эмес же эскирип калган нерсени көрүп жатасызбы? Сураныч , GitHubда маселени ачыңыз . Мүчүлүштүктөрдү аныктоого жардам керекпи? GitHub'да издеңиз же талкуу баштаңыз .