Pāriet uz galveno saturu Pāriet uz dokumentu navigāciju
Check
in English

Bootstrap un Webpack

Oficiālais ceļvedis par to, kā iekļaut un apvienot Bootstrap CSS un JavaScript savā projektā, izmantojot Webpack.

Šajā lapā
Vai vēlaties pāriet līdz beigām? Lejupielādējiet šīs rokasgrāmatas pirmkodu un darba demonstrāciju no twbs/examples krātuves . Varat arī atvērt piemēru StackBlitz tiešraides rediģēšanai.

Uzstādīt

Mēs veidojam Webpack projektu ar Bootstrap no nulles, tāpēc ir daži priekšnosacījumi un pirmie soļi, lai mēs varētu patiešām sākt darbu. Šajā rokasgrāmatā ir nepieciešams instalēt Node.js un nedaudz pārzināt termināli.

  1. Izveidojiet projekta mapi un iestatiet npm. Mēs izveidosim my-projectmapi un inicializēsim npm ar -yargumentu, lai tā neuzdotu mums visus interaktīvos jautājumus.

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

  2. Instalējiet Webpack. Tālāk mums jāinstalē mūsu Webpack izstrādes atkarības: webpackWebpack kodolam, webpack-clilai mēs varētu palaist Webpack komandas no termināļa un webpack-dev-serverpalaist vietējo izstrādes serveri. Mēs izmantojam --save-dev, lai norādītu, ka šīs atkarības ir paredzētas tikai izstrādei, nevis ražošanai.

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

  3. Instalējiet Bootstrap. Tagad mēs varam instalēt Bootstrap. Mēs arī instalēsim Popper, jo mūsu nolaižamās izvēlnes, uznirstošie logi un rīka padomi ir atkarīgi no tā pozicionēšanai. Ja neplānojat izmantot šos komponentus, varat šeit izlaist Popper.

    npm i --save bootstrap @popperjs/core

  4. Instalējiet papildu atkarības. Papildus Webpack un Bootstrap mums ir vajadzīgas vēl dažas atkarības, lai pareizi importētu un apvienotu Bootstrap CSS un JS ar Webpack. Tajos ietilpst Sass, daži iekrāvēji un Autoprefixer.

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

Tagad, kad mums ir instalētas visas nepieciešamās atkarības, mēs varam sākt darbu, veidojot projekta failus un importējot Bootstrap.

Projekta struktūra

Mēs jau esam izveidojuši my-projectmapi un inicializējuši npm. Tagad mēs arī izveidosim mūsu srcun distmapes, lai noapaļotu projekta struktūru. Palaidiet tālāk norādīto no my-project, vai manuāli izveidojiet tālāk norādīto mapi un failu struktūru.

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

Kad esat pabeidzis, jūsu pilnajam projektam vajadzētu izskatīties šādi:

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

Šobrīd viss ir īstajā vietā, taču Webpack nedarbosies, jo mēs vēl neesam aizpildījuši savu webpack.config.js.

Konfigurējiet Webpack

Kad ir instalētas atkarības un mūsu projekta mape ir gatava kodēšanas sākšanai, tagad varam konfigurēt Webpack un palaist projektu lokāli.

  1. Atveriet webpack.config.jssavā redaktorā. Tā kā tas ir tukšs, mums būs jāpievieno daži konfigurācijas parametri, lai mēs varētu palaist savu serveri. Šī konfigurācijas daļa norāda, ka Webpack ir jāmeklē mūsu projekta JavaScript, kur kompilētais kods jāizvada uz ( dist) un kā jārīkojas izstrādes serverim (izņemšana no distmapes ar karsto pārlādēšanu).

    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. Tālāk mēs aizpildām mūsu dist/index.html. Šī ir HTML lapa, ko Webpack ielādēs pārlūkprogrammā, lai izmantotu komplektā iekļauto CSS un JS, ko mēs tai pievienosim vēlākās darbībās. Pirms mēs to varam izdarīt, mums ir jādod tai kaut kas renderēšanai un jāiekļauj outputJS no iepriekšējās darbības.

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

    Mēs šeit iekļaujam nedaudz Bootstrap stila ar div class="container"un <button>, lai mēs redzētu, kad Webpack ielādē Bootstrap CSS.

  3. Tagad mums ir nepieciešams npm skripts, lai palaistu Webpack. Atveriet package.jsonun pievienojiet starttālāk redzamo skriptu (jums jau ir jābūt testa skriptam). Mēs izmantosim šo skriptu, lai palaistu mūsu vietējo Webpack izstrādātāju serveri.

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

  4. Visbeidzot, mēs varam sākt Webpack. No my-projecttermināļa mapes palaidiet tikko pievienoto npm skriptu:

    npm start
    Darbojas Webpack izstrādātāja serveris

Nākamajā un pēdējā šīs rokasgrāmatas sadaļā mēs iestatīsim Webpack ielādētājus un importēsim visu Bootstrap CSS un JavaScript.

Importēt Bootstrap

Lai importētu sāknēšanas programmu Webpack, ir nepieciešami iekrāvēji, kurus instalējām pirmajā sadaļā. Mēs esam tos instalējuši ar npm, taču tagad Webpack ir jākonfigurē, lai tos izmantotu.

  1. Uzstādiet iekrāvējus webpack.config.js. Jūsu konfigurācijas fails tagad ir pabeigts, un tam jāatbilst tālāk norādītajam fragmentam. Vienīgā jaunā daļa šeit ir modulesadaļa.

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

    Šeit ir kopsavilkums par to, kāpēc mums ir vajadzīgi visi šie iekrāvēji. style-loaderievada CSS HTML lapas <style>elementā , palīdz izmantot un , ir nepieciešams automātiskajam prefiksatoram un ļauj mums izmantot Sass.<head>css-loader@importurl()postcss-loadersass-loader

  2. Tagad importēsim Bootstrap CSS. Pievienojiet tālāk norādīto, src/scss/styles.scsslai importētu visu Bootstrap avotu Sass.

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

    Ja vēlaties, varat arī importēt mūsu stilu lapas atsevišķi. Lai iegūtu sīkāku informāciju, izlasiet mūsu Sass importēšanas dokumentus .

  3. Tālāk mēs ielādējam CSS un importējam Bootstrap JavaScript. Pievienojiet tālāk norādīto, src/js/main.jslai ielādētu CSS un importētu visu Bootstrap JS. Popper tiks automātiski importēts, izmantojot Bootstrap.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    Varat arī importēt JavaScript spraudņus atsevišķi, ja nepieciešams, lai samazinātu komplektu izmērus:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    Izlasiet mūsu JavaScript dokumentus , lai iegūtu plašāku informāciju par Bootstrap spraudņu izmantošanu.

  4. Un esat pabeidzis! 🎉 Kad Bootstrap avots Sass un JS ir pilnībā ielādēti, vietējam izstrādes serverim tagad vajadzētu izskatīties šādi.

    Webpack dev serveris, kas darbojas ar Bootstrap

    Tagad varat sākt pievienot jebkuru Bootstrap komponentu, kuru vēlaties izmantot. Noteikti apskatiet visu Webpack piemēru projektu , lai uzzinātu, kā iekļaut papildu pielāgoto Sass un optimizēt savu būvējumu, importējot tikai jums nepieciešamās Bootstrap CSS un JS daļas.

Ražošanas optimizācija

Atkarībā no jūsu iestatījuma, iespējams, vēlēsities ieviest dažus papildu drošības un ātruma optimizācijas pasākumus, kas ir noderīgi, lai palaistu projektu ražošanā. Ņemiet vērā, ka šīs optimizācijas netiek lietotas Webpack piemēra projektā un tās ir jāievieš jums.

CSS izvilkšana

Iepriekš style-loaderkonfigurētā sistēma ērti izstaro CSS komplektā, tāpēc CSS faila manuāla ielāde dist/index.htmlnav nepieciešama. Tomēr šī pieeja var nedarboties ar stingru satura drošības politiku, un tā var kļūt par sastrēgumu jūsu lietojumprogrammā lielā komplekta lieluma dēļ.

Lai atdalītu CSS un varētu to ielādēt tieši no dist/index.html, izmantojiet mini-css-extract-loaderWebpack spraudni.

Vispirms instalējiet spraudni:

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

Pēc tam izveidojiet un izmantojiet spraudni Webpack konfigurācijā:

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

Pēc npm run buildatkārtotas palaišanas būs jauns fails dist/main.css, kurā būs viss CSS, ko importējis src/js/main.js. Ja skatīsit dist/index.htmlpārlūkprogrammā tagad, trūks stila, kāds tas ir tagad dist/main.css. Jūs varat iekļaut ģenerēto CSS dist/index.htmlšādi:

--- 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 failu izvilkšana

Bootstrap CSS ietver vairākas atsauces uz SVG failiem, izmantojot iekļautos data:URI. Ja savam projektam definējat satura drošības politiku, kas bloķē data:attēlu URI, šie SVG faili netiks ielādēti. Šo problēmu varat apiet, izvelkot iekļautos SVG failus, izmantojot Webpack līdzekļu moduļu funkciju.

Konfigurējiet Webpack, lai izvilktu iekļautos SVG failus, piemēram:

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

Pēc npm run buildatkārtotas palaišanas jūs atradīsiet SVG failus, kas ir izvilkti dist/iconsCSS pakalpojumā un uz tiem ir atbilstošas ​​atsauces.

Vai redzat šeit kaut ko nepareizu vai novecojušu? Lūdzu , atveriet problēmu vietnē GitHub . Vai nepieciešama palīdzība problēmu novēršanā? Meklējiet vai sāciet diskusiju vietnē GitHub.