Kas ir Bootstrap un Webkit?

Bootstrap ir populāra HTML, CSS un JavaScript bibliotēka, ko izmanto, lai ātri un vienkārši izveidotu interaktīvas, modernas un skaistas tīmekļa lapas. Bootstrap ļauj izmantot gatavas CSS klases, lai ātri un vienkārši pievienotu lapai elementus, piemēram, navigācijas joslu, formas elementus, pogas un cita veida elementus. Bootstrap ir īpaši noderīgs, ja vēlaties ātri izveidot profesionāli izskatīgu lapu neiespringstot uz garu CSS un HTML kodu rakstīšanu.

Webpack ir populārs JavaScript bundler, kas ļauj apvienot un minimizēt JavaScript failus, lai tos varētu vieglāk ielādēt tīmekļa lapā. Webpack arī ļauj izmantot modulāro JavaScript, kas ļauj izmantot JavaScript failus, kas ir atkarīgi no citu JavaScript failu darbības. Tas padara JavaScript izstrādi vieglāku un vienkāršāku, jo varat vienkārši importēt nepieciešamos failus, kad tie ir nepieciešami, un Webpack parūpēsies par pārējo.

Uzstādīšana:

Lai izveidotu projektu no nulles ar Webpack un Bootstrap, jums ir jāveic daži priekšnoteikumi un uzdevumi, pirms jūs varat sākt strādāt. Šis ceļvedis prasa, lai jūs instalētu Node.js un esat kādu laiku lietojis termināli.

Izveidojiet projekta mapi un uzstādiet npm. Mēs izveidosim mapi my-project un uzstādīsim npm ar -y argumentu, lai izvairītos no interaktīvajiem jautājumiem.

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

Uzstādiet Webpack.

Tagad mums ir nepieciešams uzstādīt mūsu Webpack attīstības izstrādes (development dependencies): webpack par Webpack kodolu, webpack-cli, lai mēs varētu izpildīt Webpack komandas no termināļa, un webpack-dev-server, lai mēs varētu izpildīt lokālo attīstības serveri. Mēs izmantojam –save-dev, lai norādītu, ka šīs atkarības ir tikai attīstības lietošanai un ne ražošanai.

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

Uzstādiet Bootstrap.

Tagad mēs varam instalēt Bootstrap. Mēs arī instalēsim Popper, jo mūsu nolaižamās izvēlnes, popoveri un rīkjoslas atkarīgas no tā, lai tie varētu tikt novietoti. Ja jūs neplānojat izmantot šos komponentus, varat šeit izlaist Popper.

npm i --save bootstrap @popperjs/core

Uzstādiet papildu atkarības. Papildus Webpack un Bootstrap mums ir nepieciešamas vēl dažas atkarības, lai varētu importēt un bundlēt Bootstrap CSS un JS ar Webpack. Tie ietver Sass, dažus loaders 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 izveidot projekta failus un importēt Bootstrap.

Projekta struktūra:

Mēs jau izveidojām mapi my-project un uzstādījām npm. Tagad mēs arī izveidosim mapes src un dist, lai pabeigtu projekta struktūru. Izpildiet šādas komandas no mapes my-project vai manuāli izveidojiet mapes un failu struktūru, kā parādīts zemāk.

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 projekts pilnībā izskatīsies šādi:
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

Pat ja līdz šim visi soļi ir izpldīti pareizi,  Webpack nedarbosies, jo vēl nav aizpildīts mūsu webpack.config.js. Tālāk šajā rakstā izstāstīšu kā to izdarīt…

Webpack konfigurācija:

Lai konfigurētu Webpack un izpildītu projektu lokāli, jums ir nepieciešams instalēt atkarības un sagatavot projekta mapi programmēšanai.

Atveriet webpack.config.js savā redaktorā. Tā kā tā ir tukša, jums būs jāpievieno daži standarta konfigurācijas elementi, lai varētu sākt mūsu serveri. Šī konfigurācijas daļa paskaidro Webpack, kur meklēt projekta JavaScript, kur izvadīt kompilēto kodu (dist) un kā darboties attīstības serverim (pārlūkprogrammas lādēšana no dist mapes ar karstu 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
}
}

Tālāk mēs aizpildām dist/index.html. Šī ir HTML lapa, kuru Webpack ielādēs pārlūkprogrammā, lai izmantotu bundlēto CSS un JS, kurus pievienosim vēlāk. Pirms to varam izdarīt, mums ir jādod tai kaut ko renderēt un jāietver izvades JS no iepriekšējā solī.

<!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 ietveram mazliet Bootstrap stila ar div class=”container” un <button>, lai redzētu, kad Bootstrap CSS ir ielādēts ar Webpack.

Tagad mums ir nepieciešams npm skripts, lai izpildītu Webpack. Pēc tam, kad esat konfigurējis Webpack un sagatavojis projekta struktūru, varat sākt izpildīt projektu lokāli. Lai to izdarītu, atveriet package.json un pievienojiet start skriptu, kā parādīts zemāk (jums jau vajadzētu būt test skriptam). Mēs izmantosim šo skriptu, lai sāktu mūsu lokālo Webpack dev serveri.

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

Un beidzot, varat sākt Webpack. No mapes my-project terminālī izpildiet jaunākā pievienotā npm skripta:

npm start

Tā kā jūsu attīstības serveris ir sācies, jūs varat atvērt pārlūkprogrammu un piekļūt lapai localhost:8080, lai apskatītu rezultātu. Jums vajadzētu redzēt Hello, Bootstrap and Webpack! un Primary button, kas apzīmēti ar Bootstrap stilu. Tālāk varat turpināt veidot savu projektu, izmantojot Webpack un Bootstrap.

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: