Bootstrap & Parcel

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

بۇ بەتتە

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

تەڭشەش

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

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

ھازىر بارلىق زۆرۈر تايىنىشچانلىقىمىز ئورنىتىلغان بولغاچقا ، تۈر ھۆججىتىنى قۇرۇش ۋە 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

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

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

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

پوسۇلكىنى سەپلەڭ

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

src/index.htmlھۆججەتنى تولدۇرۇڭ . پوسۇلكا كۆرسىتىش ئۈچۈن بىر بەت لازىم ، شۇڭا بىز index.htmlبېتىمىزنى ئىشلىتىپ CSS ۋە JavaScript ھۆججىتىمىزنى ئۆز ئىچىگە ئالغان بىر قىسىم ئاساسلىق HTML قۇردۇق.
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Parcel</title>
    <link rel="stylesheet" href="scss/styles.scss">
    <script type="module" src="js/main.js"></script>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Parcel!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
  </body>
</html>
```
بىز بۇ يەردە ئازراق Bootstrap ئۇسلۇبىنى ئۆز ئىچىگە ئالغان بولۇپ div class="container"، <button>Bootstrap نىڭ CSS نى Webpack قا قاچان قاچىلىغانلىقىنى كۆرىمىز.

پوسۇلكا بىزنىڭ Sass نى ئىشلىتىۋاتقانلىقىمىزنى ئاپتوماتىك بايقايدۇ ۋە Sass پوسۇلكا قىستۇرمىسىنى ئورنىتىدۇ . قانداقلا بولمىسۇن ، خالىسىڭىز قولدا ئىجرا قىلالايسىز npm i --save-dev @parcel/transformer-sass.
Parcel npm قوليازمىسىنى قوشۇڭ. ئوبيېكتقا package.jsonتۆۋەندىكى startقوليازمىنى قوشۇڭ scripts. بىز بۇ قوليازمىنى ئىشلىتىپ Parcel ئېچىش مۇلازىمېتىرىمىزنى قوزغىتىمىز ۋە بىز قۇرغان HTML ھۆججىتىنى distمۇندەرىجىگە تۈزگەندىن كېيىن بېرىمىز.
```
{
   // ...
   "scripts": {
     "start": "parcel serve src/index.html --public-url / --dist-dir dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   // ...
}
```
ئاخىرىدا ، بىز پوسۇلكىنى باشلىيالايمىز. تېرمىنالىڭىزدىكى my-projectھۆججەت قىسقۇچتىن يېڭىدىن قوشۇلغان npm قوليازمىسىنى ئىجرا قىلىڭ:
```
npm start
```

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

Bootstrap نى ئەكىرىڭ

Bootstrap نى پوسۇلكىغا ئەكىرىش ئىككى ئىمپورت قىلىشنى تەلەپ قىلىدۇ ، بىرى بىزنىڭ styles.scss، بىرى بىزنىڭ main.js.

Bootstrap نىڭ CSS نى ئەكىرىڭ. src/scss/styles.scssBootstrap نىڭ بارلىق مەنبە Sass نى ئەكىرىش ئۈچۈن تۆۋەندىكىلەرنى قوشۇڭ .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ئەگەر خالىسىڭىز ئۇسلۇب جەدۋىلىمىزنى ئايرىم ئەكىرىسىز. تەپسىلاتىنى Sass ئىمپورت ھۆججەتلىرىمىزنى ئوقۇڭ .
Bootstrap نىڭ JS نى ئەكىرىڭ. src/js/main.jsBootstrap نىڭ بارلىق JS نى ئەكىرىش ئۈچۈن تۆۋەندىكىلەرنى قوشۇڭ . Popper Bootstrap ئارقىلىق ئاپتوماتىك ئىمپورتلىنىدۇ.
```
// 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 نىڭ ئېھتىياجلىق بولغان زاپچاسلىرىنىلا ئەكىرىش ئارقىلىق قۇرۇلۇشنى ئەلالاشتۇرۇش ئۈچۈن تولۇق پوسۇلكا ئۈلگە تۈرىنى تەكشۈرۈپ بېقىڭ .

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