பூட்ஸ்ட்ராப் & வைட்

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

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

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

அமைவு

புதிதாக பூட்ஸ்டார்ப் மூலம் 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
```
பூட்ஸ்டார்ப் நிறுவவும். இப்போது நாம் பூட்ஸ்டார்ப்பை நிறுவலாம். பாப்பரை நிறுவுவோம், ஏனெனில் எங்களின் டிராப் டவுன்கள், பாப்ஓவர்கள் மற்றும் டூல்டிப்கள் அவற்றின் நிலைப்படுத்தலைப் பொறுத்தது. அந்த கூறுகளைப் பயன்படுத்த நீங்கள் திட்டமிடவில்லை என்றால், நீங்கள் பாப்பரை இங்கே தவிர்க்கலாம்.
```
npm i --save bootstrap @popperjs/core
```
கூடுதல் சார்புநிலையை நிறுவவும். வைட் மற்றும் பூட்ஸ்டார்ப்பிற்கு கூடுதலாக, பூட்ஸ்டார்ப்பின் CSS ஐ சரியாக இறக்குமதி செய்து தொகுக்க மற்றொரு சார்பு (Sass) தேவை.
```
npm i --save-dev sass
```

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

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

நாங்கள் ஏற்கனவே my-projectகோப்புறையை உருவாக்கி npm ஐ துவக்கியுள்ளோம். இப்போது திட்ட கட்டமைப்பை முழுவதுமாக முடிக்க எங்கள் srcகோப்புறை, ஸ்டைல்ஷீட் மற்றும் ஜாவாஸ்கிரிப்ட் கோப்பை உருவாக்குவோம். இலிருந்து பின்வருவனவற்றை இயக்கவும் 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.config.js.

Vite ஐ உள்ளமைக்கவும்

சார்புகள் நிறுவப்பட்டு, குறியீட்டு முறையைத் தொடங்குவதற்குத் தயாராக இருக்கும் திட்டக் கோப்புறையுடன், இப்போது Viteஐ உள்ளமைத்து, எங்கள் திட்டத்தை உள்நாட்டில் இயக்கலாம்.

உங்கள் எடிட்டரில் திறக்கவும் vite.config.js. இது காலியாக இருப்பதால், அதில் சில கொதிகலன் கட்டமைப்பைச் சேர்க்க வேண்டும், எனவே எங்கள் சேவையகத்தைத் தொடங்கலாம். எங்கள் திட்டத்தின் ஜாவாஸ்கிரிப்ட் மற்றும் டெவலப்மென்ட் சர்வர் எவ்வாறு செயல்பட வேண்டும் ( srcஹாட் ரீலோட் மூலம் கோப்புறையில் இருந்து இழுப்பது) என்பதை வைட் பார்க்க வேண்டும் என்று கட்டமைப்பின் இந்தப் பகுதி கூறுகிறது.
```
const path = require('path')

export default {
  root: path.resolve(__dirname, 'src'),
  server: {
    port: 8080,
    hot: true
  }
}
```
அடுத்து நாம் நிரப்புகிறோம் src/index.html. தொகுக்கப்பட்ட CSS மற்றும் JS ஐப் பயன்படுத்த, உலாவியில் Vite ஏற்றப்படும் HTML பக்கம் இதுவாகும். அடுத்த படிகளில் அதைச் சேர்ப்போம்.
```
<!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>
```
பூட்ஸ்டார்ப் ஸ்டைலிங்கின் சிறிது சிறிதளவு இங்கே சேர்த்துள்ளோம், div class="container"இதன் <button>மூலம் பூட்ஸ்டார்ப்பின் 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
```

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

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

இல் பூட்ஸ்டார்ப்பின் சாஸ் இறக்குமதியை அமைக்கவும் 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
  }
}
```
இப்போது, பூட்ஸ்டார்ப்பின் CSS ஐ இறக்குமதி செய்வோம். src/scss/styles.scssபூட்ஸ்டார்ப்பின் அனைத்து மூல சாஸ்களையும் இறக்குமதி செய்ய பின்வருவனவற்றைச் சேர்க்கவும் .
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
நீங்கள் விரும்பினால் எங்கள் ஸ்டைல்ஷீட்களை தனித்தனியாக இறக்குமதி செய்யலாம். விவரங்களுக்கு எங்கள் சாஸ் இறக்குமதி ஆவணத்தைப் படிக்கவும் .
அடுத்து நாம் CSS ஐ ஏற்றி, பூட்ஸ்டார்ப்பின் ஜாவாஸ்கிரிப்டை இறக்குமதி செய்கிறோம். src/js/main.jsCSS ஐ ஏற்றுவதற்கு பின்வருவனவற்றைச் சேர்க்கவும் மற்றும் பூட்ஸ்டார்ப்பின் JS அனைத்தையும் இறக்குமதி செய்யவும். பூட்ஸ்ட்ராப் மூலம் பாப்பர் தானாகவே இறக்குமதி செய்யப்படும்.
```
// Import our custom CSS
import '../scss/styles.scss'

// 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 பகுதிகளை மட்டும் இறக்குமதி செய்வதன் மூலம் உங்கள் கட்டமைப்பை மேம்படுத்துவது எப்படி என்பதற்கான முழுமையான Vite உதாரணத் திட்டத்தைப் பார்க்கவும் .

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