Ботстрап & Веб-пакет

Веб-пакет ярдәмендә Bootstrap-ның CSS һәм JavaScript-ны ничек кертергә һәм бәйләргә рәсми кулланма.

Бу биттә

Ахырына атларга телисезме? Twbs / мисаллар репозиториясеннән чыганак коды һәм бу кулланма өчен эш демо йөкләү . Сез шулай ук турыдан- туры редакцияләү өчен StackBlitz мисалын ача аласыз.

Кору

Без Bootstrap белән Веб-пакет проектын төзибез, шуңа күрә кайбер шартлар һәм алгы адымнар бар. Бу кулланма сезгә Node.js урнаштыруны һәм терминал белән танышуны таләп итә.

Проект папкасын төзегез һәм npm урнаштырыгыз. Без папканы ясарбыз һәм барлык интерактив сораулар my-projectбирмәс өчен аргумент белән npm башлыйбыз .-y
```
mkdir my-project && cd my-project
npm init -y
```
Веб-пакет урнаштырыгыз. Алга таба безгә Веб-пакет үсешенә бәйле булырга тиеш: Веб webpack-пакетның үзәге өчен, webpack-cliбез терминалдан Веб-пакет командаларын эшли алабыз, һәм webpack-dev-serverбез җирле үсеш серверын эшли алабыз. Без --save-devбу бәйләнешләр җитештерү өчен түгел, ә үсеш өчен кулланыла дип сигнал бирәбез.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Bootstrap урнаштырыгыз. Хәзер без Bootstrap урнаштыра алабыз. Без шулай ук Попперны урнаштырачакбыз, чөнки безнең тамчылар, поповерлар, кораллар аларның урнашуы өчен аңа бәйле. Әгәр дә сез бу компонентларны кулланырга уйламасагыз, монда Попперны калдыра аласыз.
```
npm i --save bootstrap @popperjs/core
```
Өстәмә бәйләнешләр урнаштырыгыз. Веб-пакет һәм Bootstrap-га өстәп, Bootstrap-ның CSS һәм JS-ны Веб-пакет белән дөрес импортлау һәм бәйләү өчен безгә тагын берничә бәйләнеш кирәк. Аларга Sass, кайбер йөкләүчеләр, һәм Автопрефиксер керә.
```
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.config.jsәле тутырмаганбыз.

Веб-пакетны конфигурацияләгез

Бәйләнешләр урнаштырылган һәм безнең проект папкасы кодлаштыруны башларга әзер булганда, без хәзер Веб-пакетны конфигурацияли алабыз һәм үз проектыбызны җирле итеп эшли алабыз.

webpack.config.jsСезнең редакторда ачыгыз . Буш булганлыктан, серверны эшләтеп җибәрү өчен безгә аңа казан конфигурациясе өстәргә кирәк. Конфигурациянең бу өлеше Веб-пакетка безнең проектның 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
  }
}
```
Алга таба без үзебезне тутырабыз dist/index.html. Бу HTML бите веб-пакеты браузерда тупланган CSS һәм JS куллану өчен йөкләнәчәк, без аңа соңрак адымнарда өстәрбез. Моны эшләгәнче, без outputJS-ны күрсәтер өчен һәм алдагы адымнан 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-ның Веб-пакет белән йөкләнгәнен күрербез.
Веб-пакетны эшләтеп җибәрү өчен хәзер безгә npm скрипты кирәк. Түбәндә күрсәтелгән сценарийны ачыгыз package.jsonһәм өстәгез start(сездә сынау скрипты булырга тиеш). Без бу скриптны җирле Webpack dev серверын башлау өчен кулланачакбыз.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Finallyәм, ниһаять, без Веб-пакетны башлый алабыз. Сезнең my-projectтерминалдагы папкадан яңа кушылган npm скриптын эшләгез:
```
npm start
```

Бу кулланманың киләсе һәм соңгы бүлегендә без Веб-пакет йөкләүчеләрне урнаштырачакбыз һәм Bootstrap-ның барлык CSS һәм JavaScript-ны импортлыйбыз.

Ботстрапны импортлау

Веб-пакетка Bootstrap импортлау без беренче бүлектә урнаштырган йөкләүчеләрне таләп итә. Без аларны npm белән урнаштырдык, ләкин хәзер аларны куллану өчен Веб-пакет конфигурацияләнергә тиеш.

Йөкләүчеләрне урнаштырыгыз 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-ны HTML битендәге <style>элементка кертә, кулланырга булыша һәм Autoprefixer өчен кирәк, һәм безгә Sass кулланырга мөмкинлек бирә.<head>css-loader@importurl()postcss-loadersass-loader

Хәзер, Bootstrap CSS-ны импортлыйк. src/scss/styles.scssBootstrap чыганагы Sass-ны импортлау өчен түбәндәгеләрне өстәгез .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Сез теләсәгез, безнең стиль таблицаларын аерым кертә аласыз. Детальләр өчен безнең Sass импорт документларын укыгыз .
Алга таба без 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 документларыбызны укыгыз .
Син эшләдең! Bo Bootstrap чыганагы Sass һәм JS тулысынча йөкләнгән, сезнең җирле үсеш серверы хәзер шулай булырга тиеш.

Хәзер сез кулланырга теләгән Bootstrap компонентларын өсти башлый аласыз. Өстәмә Sass кертү һәм Bootstrap'ның CSS һәм JS өлешләрен генә кертеп, сезнең оптимальләштерү өчен тулы Веб-пакет үрнәге проектын карагыз .

Производство оптимизациясе

Сезнең көйләүгә карап, сез производствода проект өчен файдалы өстәмә куркынычсызлык һәм тизлекне оптимизацияләүне тормышка ашырырга теләрсез. Игътибар итегез, бу оптимизацияләр Веб-пакет үрнәгендә кулланылмый һәм тормышка ашыру сезгә бәйле.

CSS чыгару

Aboveгарыда style-loaderконфигурацияләнгән CSS-ны туплауга уңайлы итеп чыгарабыз, шулай итеп CSS файлын кул белән йөкләү dist/index.htmlкирәк түгел. Бу ысул катгый Эчтәлек Куркынычсызлыгы Политикасы белән эшләмәскә мөмкин, ләкин бу зур звено зурлыгы аркасында сезнең заявкагызда киртә булырга мөмкин.

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

Кабат эшләгәннән соң , сез CSS-тан npm run buildалынган һәм дөрес күрсәтелгән SVG файлларын табарсыз .dist/icons

Монда дөрес булмаган яки искергән нәрсәне карагыз? Зинһар , GitHub'та проблема ачыгыз . Проблемаларны чишүдә ярдәм кирәкме? GitHub'та эзләү яки дискуссия башлау .