Անցեք հիմնական բովանդակությանը Բաց թողնել փաստաթղթերի նավարկություն
Check
in English

Bootstrap & Webpack

Պաշտոնական ուղեցույց, թե ինչպես ներառել և փաթեթավորել Bootstrap-ի CSS-ը և JavaScript-ը ձեր նախագծում՝ օգտագործելով Webpack-ը:

Այս էջում
Ցանկանու՞մ եք բաց թողնել մինչև վերջ: Ներբեռնեք այս ուղեցույցի սկզբնական կոդը և աշխատանքային ցուցադրությունը twbs/օրինակների պահոցից : Դուք կարող եք նաև բացել օրինակը 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: Մենք նաև կտեղադրենք Popper-ը, քանի որ մեր բացվող էջերը, popover-ները և գործիքների հուշումները կախված են դրանցից իրենց դիրքավորման համար: Եթե ​​դուք չեք պլանավորում օգտագործել այդ բաղադրիչները, կարող եք այստեղ բաց թողնել 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

Այժմ, երբ մենք տեղադրված ենք բոլոր անհրաժեշտ կախվածությունները, մենք կարող ենք սկսել աշխատել նախագծի ֆայլերի ստեղծման և 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. Այժմ մեզ անհրաժեշտ է 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
    Webpack մշակող սերվերը աշխատում է

Այս ուղեցույցի հաջորդ և վերջին բաժնում մենք կտեղադրենք 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'
          }
        ]
      }
    ]
  }
}

    Ահա, թե ինչու են մեզ անհրաժեշտ այս բոլոր բեռնիչները: style-loaderներարկում է CSS-ը HTML էջի <style>տարրի մեջ , օգնում է օգտագործել և , պահանջվում է Autoprefixer-ի համար և թույլ է տալիս մեզ օգտագործել Sass-ը:<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.js՝ CSS-ը բեռնելու և Bootstrap-ի բոլոր JS-ները ներմուծելու համար: Popper-ը ավտոմատ կերպով կներմուծվի 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'

    Կարդացեք մեր JavaScript փաստաթղթերը Bootstrap-ի պլագինների օգտագործման վերաբերյալ լրացուցիչ տեղեկությունների համար:

  4. Եվ դու վերջացրիր: 🎉 Եթե Bootstrap-ի Sass-ի և JS-ի աղբյուրները լիովին բեռնված են, ձեր տեղական զարգացման սերվերն այժմ պետք է այսպիսի տեսք ունենա:

    Webpack մշակող սերվեր, որն աշխատում է Bootstrap-ով

    Այժմ կարող եք սկսել ավելացնել Bootstrap-ի ցանկացած բաղադրիչ, որը ցանկանում եք օգտագործել: Համոզվեք, որ ստուգեք ամբողջական Webpack-ի օրինակ նախագիծը , թե ինչպես ներառել լրացուցիչ մաքսային Sass և օպտիմալացնել ձեր կառուցվածքը՝ ներմուծելով միայն Bootstrap-ի CSS-ի և JS-ի այն մասերը, որոնք ձեզ անհրաժեշտ են:

Արտադրության օպտիմալացում

Կախված ձեր կարգավորումից, դուք կարող եք կիրառել անվտանգության և արագության լրացուցիչ օպտիմիզացումներ, որոնք օգտակար են նախագիծը արտադրության մեջ գործարկելու համար: Նկատի ունեցեք, որ այս օպտիմալացումները չեն կիրառվում Webpack-ի օրինակ նախագծում և ձեր գործն է:

CSS-ի արդյունահանում

Վերևում style-loaderմենք կազմաձևեցինք CSS-ը փաթեթում, որպեսզի CSS ֆայլը ձեռքով բեռնելն dist/index.htmlանհրաժեշտ չէ: Այնուամենայնիվ, այս մոտեցումը կարող է չաշխատել բովանդակության անվտանգության խիստ քաղաքականության հետ, և այն կարող է խոչընդոտ դառնալ ձեր հավելվածում՝ փաթեթի մեծ չափի պատճառով:

CSS-ն առանձնացնելու համար, որպեսզի կարողանանք այն ուղղակիորեն բեռնել ից dist/index.html, օգտագործեք mini-css-extract-loaderWebpack հավելվածը:

Նախ, տեղադրեք plugin-ը.

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 ֆայլերի արդյունահանում

Bootstrap-ի CSS-ը ներառում է բազմաթիվ հղումներ 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-ում: