Bootstrap & Webpack
La oficiala gvidilo pri kiel inkluzivi kaj kunligi CSS kaj JavaScript de Bootstrap en via projekto uzante Webpack.
Agordi
Ni konstruas Webpack-projekton kun Bootstrap de nulo, do ekzistas kelkaj antaŭkondiĉoj kaj antaŭaj paŝoj antaŭ ol ni vere povas komenci. Ĉi tiu gvidilo postulas, ke vi havu Node.js instalita kaj iom da familiareco kun la terminalo.
-
Kreu projektan dosierujon kaj agordu npm. Ni kreos la
my-projectdosierujon kaj pravalorigos npm kun la-yargumento por eviti ke ĝi faru al ni ĉiujn interagajn demandojn.mkdir my-project && cd my-project npm init -y -
Instalu Webpack. Poste ni devas instali niajn disvolvajn dependecojn de Webpack:
webpackpor la kerno de Webpack,webpack-clipor ke ni povu ruli Webpack-komandojn de la terminalo, kajwebpack-dev-servertiel ni povu ruli lokan evoluservilon. Ni uzas--save-devpor signali, ke ĉi tiuj dependecoj estas nur por disvolva uzo kaj ne por produktado.npm i --save-dev webpack webpack-cli webpack-dev-server -
Instalu Bootstrap. Nun ni povas instali Bootstrap. Ni ankaŭ instalos Popper ĉar niaj falmenuoj, popovers kaj konsiletoj dependas de ĝi por sia poziciigado. Se vi ne planas uzi tiujn komponantojn, vi povas preterlasi Popper ĉi tie.
npm i --save bootstrap @popperjs/core -
Instalu pliajn dependecojn. Krom Webpack kaj Bootstrap, ni bezonas kelkajn pliajn dependecojn por ĝuste importi kaj kunigi CSS kaj JS de Bootstrap kun Webpack. Ĉi tiuj inkluzivas Sass, iujn ŝargilojn kaj Aŭtoprefiksilon.
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
Nun kiam ni havas ĉiujn necesajn dependecojn instalitajn, ni povas eklabori kreante la projektodosierojn kaj importante Bootstrap.
Projekta strukturo
Ni jam kreis la my-projectdosierujon kaj pravigis npm. Nun ni ankaŭ kreos nian srckaj distdosierujojn por rondigi la projektostrukturon. Rulu la jenon de my-project, aŭ permane kreu la dosierujon kaj dosierstrukturon montritan sube.
mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
Kiam vi finos, via kompleta projekto devus aspekti jene:
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js
Ĉi-momente ĉio estas en la ĝusta loko, sed Webpack ne funkcios ĉar ni ankoraŭ ne plenigis nian webpack.config.js.
Agordu Webpack
Kun dependecoj instalitaj kaj nia projekta dosierujo preta por ni komenci kodigon, ni nun povas agordi Webpack kaj ruli nian projekton loke.
-
Malfermu
webpack.config.jsen via redaktilo. Ĉar ĝi estas malplena, ni devos aldoni al ĝi iom da agordo por ke ni povu komenci nian servilon. Ĉi tiu parto de la agordo diras al Webpack serĉi JavaScript de nia projekto, kie eligi la kompilitan kodon al (dist), kaj kiel la disvolva servilo devus konduti (tiri el ladistdosierujo kun varma reŝargi).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 } } -
Poste ni plenigu nian
dist/index.html. Ĉi tiu estas la HTML-paĝo Webpack ŝargiĝos en la retumilo por uzi la kunmetitajn CSS kaj JS, kiujn ni aldonos al ĝi en postaj paŝoj. Antaŭ ol ni povas fari tion, ni devas doni al ĝi ion por bildigi kaj inkluzivi laoutputJS de la antaŭa paŝo.<!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>Ni inkluzivas iom da Bootstrap-stilado ĉi tie kun la
div class="container"kaj<button>por ke ni vidu kiam la CSS de Bootstrap estas ŝarĝita de Webpack. -
Nun ni bezonas npm-skripton por ruli Webpack. Malfermu
package.jsonkaj aldonu lastartskripton montritan sube (vi jam havu la testan skripton). Ni uzos ĉi tiun skripton por komenci nian lokan Webpack-dev-servilon.{ // ... "scripts": { "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } -
Kaj finfine, ni povas komenci Webpack. El la
my-projectdosierujo en via terminalo, rulu tiun lastatempe aldonitan npm-skripton:npm start
En la sekva kaj fina sekcio de ĉi tiu gvidilo, ni starigos la Webpack-ŝargilojn kaj importos ĉiujn CSS kaj JavaScript de Bootstrap.
Importu Bootstrap
Importi Bootstrap en Webpack postulas la ŝargilojn, kiujn ni instalis en la unua sekcio. Ni instalis ilin per npm, sed nun Webpack devas esti agordita por uzi ilin.
-
Agordu la ŝargilojn en
webpack.config.js. Via agorda dosiero nun estas kompleta kaj devus kongrui kun la suba fragmento. La sola nova parto ĉi tie estas lamodulesekcio.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' } ] } ] } }Jen resumo pri kial ni bezonas ĉiujn ĉi tiujn ŝargilojn.
style-loaderinjektas la CSS en<style>elementon en la<head>de la HTML-paĝo,css-loaderhelpas uzi@importkajurl(),postcss-loaderestas bezonata por Aŭtoprefiksilo, kajsass-loaderpermesas al ni uzi Sass. -
Nun ni importu CSS de Bootstrap. Aldonu la jenon al
src/scss/styles.scsspor importi la tutan fonton de Bootstrap Sass.// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";Vi ankaŭ povas importi niajn stilfoliojn individue, se vi volas. Legu niajn Sass-importdokumentojn por detaloj.
-
Poste ni ŝarĝas la CSS kaj importas la JavaScript de Bootstrap. Aldonu la jenon al
src/js/main.jspor ŝargi la CSS kaj importi ĉiujn JS de Bootstrap. Popper estos aŭtomate importita per Bootstrap.// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'Vi ankaŭ povas importi JavaScript-kromaĵojn individue laŭbezone por malpliigi pakaĵgrandojn:
import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap'Legu niajn JavaScript-dokumentojn por pliaj informoj pri kiel uzi la kromaĵojn de Bootstrap.
-
Kaj vi finis! 🎉 Kun la fonto de Bootstrap Sass kaj JS plene ŝarĝitaj, via loka disvolva servilo nun devus aspekti tiel.
Nun vi povas komenci aldoni iujn ajn Bootstrap-komponentojn, kiujn vi volas uzi. Nepre kontrolu la kompletan ekzemplan projekton de Webpack por kiel inkluzivi plian kutiman Sass kaj optimumigi vian konstruon importante nur la partojn de CSS kaj JS de Bootstrap, kiujn vi bezonas.
Optimumigoj de produktado
Depende de via aranĝo, vi eble volas efektivigi kelkajn pliajn sekurecajn kaj rapidecajn optimumojn utilajn por funkcii la projekton en produktado. Notu, ke ĉi tiuj optimumigoj ne estas aplikataj en la ekzempla projekto Webpack kaj dependas de vi efektivigi.
Eltiro de CSS
La style-loaderni agordita supre oportune elsendas CSS en la pakaĵon tiel ke permane ŝargi CSS-dosieron dist/index.htmlne estas necesa. Ĉi tiu aliro eble ne funkcias kun strikta Enhava Sekurecpolitiko, tamen, kaj ĝi povas fariĝi proplempunkto en via aplikaĵo pro la granda pakaĵo.
Por apartigi la CSS por ke ni povu ŝargi ĝin rekte de dist/index.html, uzu la mini-css-extract-loaderkromprogramon Webpack.
Unue, instalu la kromprogramon:
npm install --save-dev mini-css-extract-plugin
Tiam instancigu kaj uzu la kromprogramon en la Webpack-agordo:
--- 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
},
{
Post ruliĝo npm run builddenove, estos nova dosiero dist/main.css, kiu enhavos ĉiujn CSS importitajn de src/js/main.js. Se vi vidas dist/index.htmlen via retumilo nun, la stilo mankos, kiel ĝi nun estas en dist/main.css. Vi povas inkluzivi la generitan CSS dist/index.htmljene:
--- 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>
Eltiro de SVG-dosieroj
La CSS de Bootstrap inkluzivas plurajn referencojn al SVG-dosieroj per enliniaj data:URIoj. Se vi difinas Enhavan Sekurecpolitikon por via projekto kiu blokas data:URIojn por bildoj, tiam ĉi tiuj SVG-dosieroj ne ŝargiĝos. Vi povas ĉirkaŭiri ĉi tiun problemon ĉerpante la enliniajn SVG-dosierojn uzante la funkcion pri valoraj moduloj de Webpack.
Agordu Webpack por ĉerpi enliniajn SVG-dosierojn tiel:
--- 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: [
Post kuri npm run builddenove, vi trovos la SVG-dosierojn ĉerpitaj dist/iconskaj ĝuste referenciitaj de CSS.
Vidas ion malĝustan aŭ malmodernan ĉi tie? Bonvolu malfermi problemon en GitHub . Ĉu vi bezonas helpon pri solvo de problemoj? Serĉu aŭ komencu diskuton en GitHub.