பூட்ஸ்ட்ராப் & பார்சல்

பார்சலைப் பயன்படுத்தி உங்கள் திட்டத்தில் பூட்ஸ்டார்ப்பின் CSS மற்றும் ஜாவாஸ்கிரிப்டை எவ்வாறு சேர்ப்பது மற்றும் தொகுப்பது என்பதற்கான அதிகாரப்பூர்வ வழிகாட்டி.

இந்தப் பக்கத்தில்

இறுதிவரை தவிர்க்க வேண்டுமா? இந்த வழிகாட்டிக்கான மூலக் குறியீடு மற்றும் வேலை செய்யும் டெமோவை twbs/examples களஞ்சியத்திலிருந்து பதிவிறக்கவும் . நீங்கள் உதாரணத்தை StackBlitzல் திறக்கலாம் ஆனால் பார்சல் தற்போது ஆதரிக்கப்படாததால் அதை இயக்க முடியாது.

அமைவு

நாங்கள் புதிதாக பூட்ஸ்டார்ப் மூலம் பார்சல் திட்டத்தை உருவாக்கி வருகிறோம், எனவே நாங்கள் உண்மையில் தொடங்குவதற்கு முன் சில முன்நிபந்தனைகள் மற்றும் முன் படிகள் உள்ளன. இந்த வழிகாட்டிக்கு நீங்கள் Node.js நிறுவப்பட்டிருக்க வேண்டும் மற்றும் முனையத்துடன் சில பரிச்சயம் தேவை.

திட்ட கோப்புறையை உருவாக்கி npm ஐ அமைக்கவும். நாங்கள் கோப்புறையை உருவாக்கி, எல்லா ஊடாடும் கேள்விகளையும் எங்களிடம் கேட்பதைத் தவிர்க்க my-project, வாதத்துடன் npm ஐ துவக்குவோம் .-y
```
mkdir my-project && cd my-project
npm init -y
```
பார்சலை நிறுவவும். எங்கள் Webpack வழிகாட்டியைப் போலல்லாமல், இங்கு ஒரே ஒரு உருவாக்க கருவி சார்பு மட்டுமே உள்ளது. பார்சல் தானாகவே மொழி மின்மாற்றிகளை (சாஸ் போன்றவை) நிறுவும். --save-devஇந்த சார்பு வளர்ச்சிக்கான பயன்பாட்டிற்கு மட்டுமே மற்றும் உற்பத்திக்கு அல்ல என்பதை நாங்கள் சமிக்ஞை செய்கிறோம் .
```
npm i --save-dev parcel
```
பூட்ஸ்டார்ப் நிறுவவும். இப்போது நாம் பூட்ஸ்டார்ப்பை நிறுவலாம். பாப்பரை நிறுவுவோம், ஏனெனில் எங்களின் டிராப் டவுன்கள், பாப்ஓவர்கள் மற்றும் டூல்டிப்கள் அவற்றின் நிலைப்படுத்தலைப் பொறுத்தது. அந்த கூறுகளைப் பயன்படுத்த நீங்கள் திட்டமிடவில்லை என்றால், நீங்கள் பாப்பரை இங்கே தவிர்க்கலாம்.
```
npm i --save bootstrap @popperjs/core
```

இப்போது தேவையான அனைத்து சார்புகளையும் நிறுவியுள்ளோம், திட்டக் கோப்புகளை உருவாக்கி பூட்ஸ்டார்ப்பை இறக்குமதி செய்யலாம்.

திட்ட அமைப்பு

நாங்கள் ஏற்கனவே my-projectகோப்புறையை உருவாக்கி npm ஐ துவக்கியுள்ளோம். இப்போது திட்ட கட்டமைப்பை முழுவதுமாக முடிக்க எங்கள் srcகோப்புறை, ஸ்டைல்ஷீட் மற்றும் ஜாவாஸ்கிரிப்ட் கோப்பை உருவாக்குவோம். இலிருந்து பின்வருவனவற்றை இயக்கவும் 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>
```
நாங்கள் பூட்ஸ்டார்ப் ஸ்டைலிங்கின் சிறிதளவு இங்கே சேர்த்துள்ளோம், div class="container"இதனால் <button>பூட்ஸ்டார்ப்பின் CSS Webpack மூலம் ஏற்றப்படும் போது பார்க்கலாம்.

நாம் Sass ஐப் பயன்படுத்துகிறோம் என்பதை பார்சல் தானாகவே கண்டறிந்து, அதை ஆதரிக்க Sass பார்சல் செருகுநிரலை நிறுவும். இருப்பினும், நீங்கள் விரும்பினால், நீங்கள் கைமுறையாக இயக்கலாம் npm i --save-dev @parcel/transformer-sass.
பார்சல் npm ஸ்கிரிப்ட்களைச் சேர்க்கவும். அதைத் திறந்து, பொருளில் package.jsonபின்வரும் startஸ்கிரிப்டைச் சேர்க்கவும். இந்த ஸ்கிரிப்டைப் பயன்படுத்தி, எங்கள் பார்சல் டெவலப்மென்ட் சர்வரைத் தொடங்கவும், கோப்பகத்தில் scriptsதொகுக்கப்பட்ட பிறகு நாங்கள் உருவாக்கிய 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
```

இந்த வழிகாட்டியின் அடுத்த மற்றும் இறுதிப் பிரிவில், பூட்ஸ்டார்ப்பின் CSS மற்றும் ஜாவாஸ்கிரிப்ட் அனைத்தையும் இறக்குமதி செய்வோம்.

பூட்ஸ்ட்ராப் இறக்குமதி

பூட்ஸ்டார்ப்பை பார்சலில் இறக்குமதி செய்ய இரண்டு இறக்குமதிகள் தேவை, ஒன்று எங்களுடையது styles.scssமற்றும் ஒன்று எங்களுடையது main.js.

பூட்ஸ்டார்ப்பின் CSS ஐ இறக்குமதி செய்யவும். src/scss/styles.scssபூட்ஸ்டார்ப்பின் அனைத்து மூல சாஸ்களையும் இறக்குமதி செய்ய பின்வருவனவற்றைச் சேர்க்கவும் .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
நீங்கள் விரும்பினால் எங்கள் ஸ்டைல்ஷீட்களை தனித்தனியாக இறக்குமதி செய்யலாம். விவரங்களுக்கு எங்கள் சாஸ் இறக்குமதி ஆவணத்தைப் படிக்கவும் .
பூட்ஸ்டார்ப்பின் JS ஐ இறக்குமதி செய்யவும். src/js/main.jsபூட்ஸ்டார்ப்பின் JS அனைத்தையும் இறக்குமதி செய்ய பின்வருவனவற்றைச் சேர்க்கவும் . பூட்ஸ்ட்ராப் மூலம் பாப்பர் தானாகவே இறக்குமதி செய்யப்படும்.
```
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
தொகுப்பின் அளவைக் குறைக்க தேவையான ஜாவாஸ்கிரிப்ட் செருகுநிரல்களையும் தனித்தனியாக இறக்குமதி செய்யலாம்:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
பூட்ஸ்டார்ப்பின் செருகுநிரல்களை எவ்வாறு பயன்படுத்துவது என்பது பற்றிய கூடுதல் தகவலுக்கு எங்கள் ஜாவாஸ்கிரிப்ட் டாக்ஸைப் படிக்கவும் .
நீங்கள் முடித்துவிட்டீர்கள்! 🎉 பூட்ஸ்டார்ப்பின் மூல Sass மற்றும் JS முழுமையாக ஏற்றப்பட்ட நிலையில், உங்கள் உள்ளூர் மேம்பாட்டு சேவையகம் இப்போது இப்படி இருக்க வேண்டும்.

இப்போது நீங்கள் பயன்படுத்த விரும்பும் பூட்ஸ்டார்ப் கூறுகளைச் சேர்க்கலாம். கூடுதல் தனிப்பயன் சாஸை எவ்வாறு சேர்ப்பது மற்றும் உங்களுக்குத் தேவையான பூட்ஸ்டார்ப்பின் CSS மற்றும் JS பகுதிகளை மட்டும் இறக்குமதி செய்வதன் மூலம் உங்கள் கட்டமைப்பை மேம்படுத்துவது எப்படி என்பதற்கான முழுமையான பார்சல் உதாரணத் திட்டத்தைப் பார்க்கவும்.

இங்கே ஏதேனும் தவறு அல்லது காலாவதியானதா? GitHub இல் சிக்கலைத் திறக்கவும் . சிக்கலைத் தீர்க்க உதவி தேவையா? GitHub இல் தேடவும் அல்லது விவாதத்தைத் தொடங்கவும் .