Bootstrap & Vite

Boitestrap نىڭ CSS ۋە JavaScript نى Vite ئارقىلىق تۈرىڭىزگە قانداق كىرگۈزۈش ۋە باغلاشنىڭ رەسمىي قوللانمىسى.

بۇ بەتتە

ئاخىرىغا ئاتلىنىشنى خالامسىز؟ Twbs / مىساللار ئامبىرىدىن بۇ قوللانمىنىڭ ئەسلى كودى ۋە خىزمەت كۆرسەتمىسىنى چۈشۈرۈڭ . نەق مەيدان تەھرىرلەش ئۈچۈن StackBlitz دا مىسالنى ئاچسىڭىز بولىدۇ .

تەڭشەش

بىز Bootstrap بىلەن باشتىن-ئاخىر Vite تۈرىنى ياساۋاتىمىز ، شۇڭا ھەقىقىي باشلاشتىن بۇرۇن بەزى ئالدىنقى شەرتلەر ۋە ئالدىنقى باسقۇچلار بار. بۇ قوللانما سىزدىن Node.js نى ئورنىتىشىڭىزنى ۋە تېرمىنالغا پىششىق بولۇشىڭىزنى تەلەپ قىلىدۇ.

تۈر ھۆججەت قىسقۇچى قۇرۇپ ، npm نى تەڭشەڭ. بىز بۇ بارلىق ھۆججەتلەرنى سوراشتىن ساقلىنىش ئۈچۈن my-projectھۆججەت قىسقۇچنى قۇرۇپ ، تالاش-تارتىش بىلەن npm نى باشلايمىز .-y
```
mkdir my-project && cd my-project
npm init -y
```
Vite نى قاچىلاڭ. Webpack يېتەكچىمىزگە ئوخشىمايدىغىنى ، بۇ يەردە پەقەت بىرلا قۇرال قورالغا تايىنىشچانلىقى بار. بىز --save-devبۇ تايىنىشنىڭ پەقەت تەرەققىيات ئۈچۈنلا ئىشلىتىلىدىغانلىقى ، ئىشلەپچىقىرىش ئۈچۈن ئەمەسلىكىنى بىلدۈرىمىز.
```
npm i --save-dev vite
```
Bootstrap نى قاچىلاڭ. ھازىر Bootstrap نى قاچىلىيالايمىز. تۆۋەنلەش ، سەكرەش ۋە قورال قوراللىرىمىزنىڭ ئورنى ئۇلارنىڭ ئوخشىماسلىقىغا باغلىق بولغاچقا ، Popper نىمۇ ئورنىتىمىز. ئەگەر بۇ زاپچاسلارنى ئىشلىتىشنى پىلانلىمىسىڭىز ، Popper نى بۇ يەردىن تاشلىۋەتسىڭىز بولىدۇ.
```
npm i --save bootstrap @popperjs/core
```
قوشۇمچە بېقىنىشنى ئورنىتىڭ. Vite ۋە Bootstrap دىن باشقا ، بىز Bootstrap نىڭ CSS نى توغرا ئىمپورتلاش ۋە باغلاش ئۈچۈن يەنە بىر بېقىنىش (Sass) غا موھتاج.
```
npm i --save-dev sass
```

ھازىر بىزنىڭ بارلىق زۆرۈر تايىنىشچانلىقىمىز ئورنىتىلغان ۋە ئورنىتىلغان بولغاچقا ، تۈر ھۆججىتى قۇرۇش ۋە Bootstrap ئەكىرىش خىزمىتىگە ئېرىشەلەيمىز.

تۈر قۇرۇلمىسى

بىز بۇ my-projectھۆججەت قىسقۇچنى قۇردۇق ۋە npm نى باشلىدۇق. ھازىر بىز يەنە srcھۆججەت قۇرۇلمىسىنى چۆرىدىگەن ھالدا ھۆججەت قىسقۇچ ، ئۇسلۇب جەدۋىلى ۋە JavaScript ھۆججىتىنى قۇرىمىز. تۆۋەندىكىلەرنى ئىجرا قىلىڭ my-projectياكى تۆۋەندە كۆرسىتىلگەن ھۆججەت قىسقۇچ ۋە ھۆججەت قۇرۇلمىسىنى قولدا قۇرۇڭ.

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

ئىش تاماملانغاندىن كېيىن ، تولۇق تۈرىڭىز مۇنداق بولۇشى كېرەك:

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

بۇ ۋاقىتتا ھەممە نەرسە دەل جايىدا ، ئەمما Vite ئىشلىمەيدۇ ، چۈنكى بىز تېخى تولدۇرمىدۇق vite.config.js.

Vite نى سەپلەڭ

تايىنىشچانلىقى ئورنىتىلغان ۋە بىزنىڭ ھۆججەت قىسقۇچ بىزنىڭ كودلاشنى باشلىشىمىزغا تەييار بولغاچقا ، بىز ھازىر Vite نى سەپلەپ ، تۈرىمىزنى يەرلىكتە ئىجرا قىلالايمىز.

vite.config.jsتەھرىرىڭىزنى ئېچىڭ . ئۇ قۇرۇق بولغاچقا ، ئۇنىڭغا بىر قىسىم پار قازان سەپلىمىسى قوشۇشىمىز كېرەك ، شۇنداق بولغاندا مۇلازىمىتىرىمىزنى قوزغىتالايمىز. سەپلىمىنىڭ بۇ قىسمى Vite غا تۈرىمىزنىڭ JavaScript نى ئىزدەش ۋە ئېچىش مۇلازىمېتىرىنىڭ قانداق قىلىش كېرەكلىكىنى ( srcقىسقۇچتىن ئىسسىق قايتا قاچىلاش ئارقىلىق تارتىپ چىقىرىش) نى كۆرسىتىدۇ.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```

كېيىنكىسىنى تولدۇرىمىز src/index.html. بۇ HTML بېتى Vite توركۆرگۈچكە قاچىلانغان باغلانغان CSS ۋە JS نى كېيىنكى باسقۇچلاردا قوشىمىز.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Vite</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Vite!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

بىز بۇ يەردە ئازراق Bootstrap ئۇسلۇبىنى ئۆز ئىچىگە ئالىمىز ، div class="container"شۇڭا <button>Bootstrap نىڭ CSS قا Vite قا قاچان يۈكلەنگەنلىكىنى كۆرىمىز.

ھازىر Vite نى ئىجرا قىلىش ئۈچۈن npm قوليازمىسى لازىم. تۆۋەندە كۆرسىتىلگەن قوليازمىنى ئېچىڭ package.jsonۋە قوشۇڭ start(سىزدە سىناق قوليازمىسى بولۇشى كېرەك). بىز بۇ قوليازمىنى ئىشلىتىپ يەرلىك Vite dev مۇلازىمېتىرىمىزنى باشلايمىز.
```
{
  // ...
  "scripts": {
    "start": "vite",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
ئاخىرىدا ، بىز Vite نى قوزغىتالايمىز. تېرمىنالىڭىزدىكى my-projectھۆججەت قىسقۇچتىن يېڭىدىن قوشۇلغان npm قوليازمىسىنى ئىجرا قىلىڭ:
```
npm start
```

بۇ قوللانمىنىڭ كېيىنكى ۋە ئاخىرقى بۆلىكىدە بىز Bootstrap نىڭ CSS ۋە JavaScript نىڭ ھەممىسىنى ئەكىرىمىز.

Bootstrap نى ئەكىرىڭ

Bootstrap نىڭ Sass ئىمپورتىنى تەڭشەڭ vite.config.js. سەپلىمە ھۆججىتىڭىز ھازىر تولۇق بولۇپ ، تۆۋەندىكى ئۈزۈندىگە ماس كېلىشى كېرەك. بۇ يەردىكى بىردىنبىر يېڭى بۆلەك بۇ بۆلەك - بىز بۇنى ئىمكانقەدەر ئاددىي قىلىپ ساقلاش ئۈچۈن resolveئىچىدىكى مەنبە ھۆججىتىمىزگە بىر ئىسىم قوشۇش ئۈچۈن ئىشلىتىمىز .node_modules
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  resolve: {
    alias: {
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
    }
  },
  server: {
    port: 8080,
    hot: true
  }
}
```
ئەمدى Bootstrap نىڭ CSS نى ئەكىرىمىز. src/scss/styles.scssBootstrap نىڭ بارلىق مەنبە Sass نى ئەكىرىش ئۈچۈن تۆۋەندىكىلەرنى قوشۇڭ .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ئەگەر خالىسىڭىز ئۇسلۇب جەدۋىلىمىزنى ئايرىم ئەكىرىسىز. تەپسىلاتىنى Sass ئىمپورت ھۆججەتلىرىمىزنى ئوقۇڭ .
كېيىنكى قەدەمدە بىز CSS نى يۈكلەپ Bootstrap نىڭ JavaScript نى ئەكىرىمىز. تۆۋەندىكىلەرنى قوشۇپ src/js/main.jsCSS نى يۈكلەڭ ۋە 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';
```
Bootstrap نىڭ قىستۇرمىلىرىنى قانداق ئىشلىتىش ھەققىدە تېخىمۇ كۆپ ئۇچۇرغا ئېرىشىش ئۈچۈن JavaScript ھۆججىتىمىزنى ئوقۇڭ .
ئىش تامام! Bo Bootstrap نىڭ مەنبەسى Sass ۋە JS تولۇق قاچىلانغان بولغاچقا ، يەرلىك تەرەققىيات مۇلازىمېتىرىڭىز مۇشۇنىڭغا ئوخشايدۇ.

ھازىر سىز ئىشلەتمەكچى بولغان Bootstrap زاپچاسلىرىنى قوشالايسىز. قوشۇمچە ئىختىيارى Sass نى قانداق ئۆز ئىچىگە ئالىدىغانلىقى ۋە Bootstrap نىڭ CSS ۋە JS نىڭ ئېھتىياجلىق بولغان زاپچاسلىرىنىلا ئەكىرىش ئارقىلىق قۇرۇلۇشنى ئەلالاشتۇرۇش ئۈچۈن تولۇق Vite ئۈلگە تۈرىنى تەكشۈرۈپ بېقىڭ .

بۇ يەردە خاتا ياكى ۋاقتى ئۆتكەن نەرسىلەرنى كۆرۈڭ؟ GitHub دا مەسىلە ئېچىڭ . مەسىلىلەرنى ھەل قىلىشقا ياردەم كېرەكمۇ؟ GitHub دىن ئىزدەڭ ياكى مۇنازىرە قىلىڭ.