Bootstrap & Webpack

Mwongozo rasmi wa jinsi ya kujumuisha na kuunganisha CSS ya Bootstrap na JavaScript katika mradi wako kwa kutumia Webpack.

Katika ukurasa huu

Je, ungependa kuruka hadi mwisho? Pakua msimbo wa chanzo na onyesho la kufanya kazi la mwongozo huu kutoka hazina ya twbs/mifano . Unaweza pia kufungua mfano katika StackBlitz kwa uhariri wa moja kwa moja.

Sanidi

Tunaunda mradi wa Webpack na Bootstrap kutoka mwanzo, kwa hivyo kuna mahitaji ya lazima na hatua za mbele kabla hatujaanza. Mwongozo huu unahitaji uwe na Node.js iliyosakinishwa na ujuzi fulani na terminal.

Unda folda ya mradi na usanidi npm. Tutaunda my-projectfolda na kuanzisha npm kwa -yhoja ili kuepusha kutuuliza maswali yote ya mwingiliano.
```
mkdir my-project && cd my-project
npm init -y
```
Sakinisha Webpack. Ifuatayo tunahitaji kusakinisha tegemezi zetu za ukuzaji wa Webpack: webpackkwa msingi wa Webpack, webpack-cliili tuweze kuendesha amri za Webpack kutoka kwa terminal, na webpack-dev-serverili tuweze kuendesha seva ya ukuzaji ya ndani. Tunatumia --save-devkuashiria kuwa tegemezi hizi ni kwa matumizi ya maendeleo tu na sio kwa uzalishaji.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Sakinisha Bootstrap. Sasa tunaweza kusakinisha Bootstrap. Pia tutasakinisha Popper kwa kuwa menyu kunjuzi, popover na vidokezo vyetu hutegemea kwa uwekaji wao. Ikiwa huna mpango wa kutumia vipengele hivyo, unaweza kuachana na Popper hapa.
```
npm i --save bootstrap @popperjs/core
```
Sakinisha vitegemezi vya ziada. Kando na Webpack na Bootstrap, tunahitaji vitegemezi vichache zaidi ili kuleta na kuunganisha vyema CSS ya Bootstrap na JS na Webpack. Hizi ni pamoja na Sass, baadhi ya vipakiaji, na Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Sasa kwa kuwa tuna tegemezi zote muhimu zilizosakinishwa, tunaweza kuanza kazi kuunda faili za mradi na kuagiza Bootstrap.

Muundo wa mradi

Tayari tumeunda my-projectfolda na kuanzisha npm. Sasa tutaunda yetu srcna distfolda ili kuzunguka muundo wa mradi. Endesha zifuatazo kutoka my-project, au uunde mwenyewe folda na muundo wa faili ulioonyeshwa hapa chini.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Unapomaliza, mradi wako kamili unapaswa kuonekana kama hii:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

Kwa wakati huu, kila kitu kiko mahali pazuri, lakini Webpack haitafanya kazi kwa sababu bado hatujajaza yetu webpack.config.js.

Sanidi Webpack

Vitegemezi vikiwa vimesakinishwa na folda yetu ya mradi iko tayari kwa sisi kuanza kusimba, sasa tunaweza kusanidi Webpack na kuendesha mradi wetu ndani ya nchi.

Fungua webpack.config.jskatika kihariri chako. Kwa kuwa haina kitu, tutahitaji kuongeza usanidi wa boilerplate kwake ili tuweze kuanzisha seva yetu. Sehemu hii ya usanidi inaambia Webpack ingetafuta JavaScript ya mradi wetu, mahali pa kutoa nambari iliyokusanywa kwa ( dist), na jinsi seva ya ukuzaji inapaswa kuishi (kuvuta kutoka kwa distfolda na upakiaji moto tena).
```
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
  }
}
```

Ifuatayo tunajaza yetu dist/index.html. Huu ni ukurasa wa HTML Webpack itapakia kwenye kivinjari ili kutumia CSS iliyounganishwa na JS tutaiongeza katika hatua za baadaye. Kabla ya kufanya hivyo, lazima tuipe kitu cha kutoa na kujumuisha outputJS kutoka hatua ya awali.

<!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>

Tunajumuisha mtindo mdogo wa Bootstrap hapa na div class="container"na <button>ili tuone wakati CSS ya Bootstrap inapopakiwa na Webpack.

Sasa tunahitaji hati ya npm ili kuendesha Webpack. Fungua package.jsonna uongeze starthati iliyoonyeshwa hapa chini (tayari unapaswa kuwa na hati ya jaribio). Tutatumia hati hii kuanzisha seva yetu ya ndani ya Webpack.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Na mwishowe, tunaweza kuanza Webpack. Kutoka kwa my-projectfolda kwenye terminal yako, endesha hati mpya ya npm:
```
npm start
```

Katika sehemu inayofuata na ya mwisho ya mwongozo huu, tutasanidi vipakiaji vya Webpack na kuagiza CSS zote za Bootstrap na JavaScript.

Ingiza Bootstrap

Kuingiza Bootstrap kwenye Webpack kunahitaji vipakiaji tulivyosakinisha katika sehemu ya kwanza. Tumezisakinisha na npm, lakini sasa Webpack inahitaji kusanidiwa ili kuzitumia.

Sanidi vipakiaji ndani webpack.config.js. Faili yako ya usanidi sasa imekamilika na inapaswa kuendana na kijisehemu kilicho hapa chini. Sehemu mpya pekee hapa ni modulesehemu.

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

Hapa kuna muhtasari wa kwa nini tunahitaji vipakiaji hivi vyote. style-loaderhuingiza CSS kwenye <style>kipengele katika <head>ukurasa wa HTML, css-loaderhusaidia kutumia @importna url(), postcss-loaderinahitajika kwa Autoprefixer, na sass-loaderhuturuhusu kutumia Sass.

Sasa, hebu tuagize CSS ya Bootstrap. Ongeza yafuatayo ili src/scss/styles.scsskuleta vyanzo vyote vya Bootstrap Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Unaweza pia kuagiza laha zetu za mitindo kibinafsi ikiwa unataka. Soma hati zetu za kuagiza za Sass kwa maelezo zaidi.
Ifuatayo tunapakia CSS na kuagiza JavaScript ya Bootstrap. Ongeza yafuatayo ili src/js/main.jskupakia CSS na kuagiza JS zote za Bootstrap. Popper italetwa kiotomatiki kupitia Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Unaweza pia kuagiza programu jalizi za JavaScript kibinafsi kama inahitajika ili kupunguza ukubwa wa vifurushi:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Soma hati zetu za JavaScript kwa maelezo zaidi kuhusu jinsi ya kutumia programu jalizi za Bootstrap.
Na umemaliza! 🎉 Kwa chanzo cha Bootstrap Sass na JS zikiwa zimepakiwa kikamilifu, seva yako ya usanidi ya karibu inapaswa sasa kuonekana hivi.

Sasa unaweza kuanza kuongeza vijenzi vyovyote vya Bootstrap unavyotaka kutumia. Hakikisha kuwa umeangalia mradi kamili wa mfano wa Webpack wa jinsi ya kujumuisha Sass maalum ya ziada na uboresha muundo wako kwa kuleta tu sehemu za CSS na JS za Bootstrap unazohitaji.

Uboreshaji wa uzalishaji

Kulingana na usanidi wako, unaweza kutaka kutekeleza usalama zaidi na uboreshaji wa kasi muhimu kwa ajili ya kuendesha mradi katika uzalishaji. Kumbuka kuwa uboreshaji huu hautumiki kwenye mradi wa mfano wa Webpack na ni juu yako kutekeleza.

Inachimba CSS

Tuliyosanidi style-loaderhapo juu hutoa CSS kwenye kifurushi kwa urahisi ili kupakia faili ya CSS mwenyewe dist/index.htmlsi lazima. Mbinu hii inaweza isifanye kazi na Sera madhubuti ya Usalama wa Maudhui, hata hivyo, na inaweza kuwa kizuizi katika programu yako kutokana na ukubwa mkubwa wa kifurushi.

Ili kutenganisha CSS ili tuweze kuipakia moja kwa moja kutoka dist/index.html, tumia mini-css-extract-loaderprogramu-jalizi ya Webpack.

Kwanza, sakinisha programu-jalizi:

npm install --save-dev mini-css-extract-plugin

Kisha sisitiza na utumie programu-jalizi kwenye usanidi wa 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
           },
           {

Baada ya kufanya kazi npm run buildtena, kutakuwa na faili mpya dist/main.css, ambayo itakuwa na CSS zote zilizoletwa na src/js/main.js. Ukitazama dist/index.htmlkwenye kivinjari chako sasa, mtindo huo hautakuwepo, kama ulivyo sasa katika dist/main.css. Unaweza kujumuisha CSS iliyotengenezwa dist/index.htmlkama hii:

--- 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>

Inachimba faili za SVG

CSS ya Bootstrap inajumuisha marejeleo mengi kwa faili za SVG kupitia data:URI za ndani. Ukifafanua Sera ya Usalama ya Maudhui ya mradi wako ambayo inazuia data:URI kwa picha, basi faili hizi za SVG hazitapakia. Unaweza kusuluhisha shida hii kwa kutoa faili za SVG za ndani kwa kutumia kipengele cha moduli za vipengee vya Webpack.

Sanidi Webpack ili kutoa faili za SVG za ndani kama hii:

--- 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: [

Baada ya kukimbia npm run buildtena, utapata faili za SVG zimetolewa ndani dist/iconsna kurejelewa ipasavyo kutoka kwa CSS.

Je, unaona jambo lisilofaa au lililopitwa na wakati hapa? Tafadhali fungua suala kwenye GitHub . Je, unahitaji usaidizi wa utatuzi? Tafuta au anza majadiliano kwenye GitHub.