ਬੂਟਸਟਰੈਪ ਅਤੇ Vite

Vite ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ Bootstrap ਦੇ CSS ਅਤੇ JavaScript ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਅਤੇ ਬੰਡਲ ਕਰਨਾ ਹੈ ਇਸ ਲਈ ਅਧਿਕਾਰਤ ਗਾਈਡ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਅੰਤ ਤੱਕ ਛੱਡਣਾ ਚਾਹੁੰਦੇ ਹੋ? ਇਸ ਗਾਈਡ ਲਈ ਸਰੋਤ ਕੋਡ ਅਤੇ ਕਾਰਜਸ਼ੀਲ ਡੈਮੋ ਨੂੰ twbs/ਉਦਾਹਰਨ ਰਿਪੋਜ਼ਟਰੀ ਤੋਂ ਡਾਊਨਲੋਡ ਕਰੋ । ਤੁਸੀਂ ਲਾਈਵ ਸੰਪਾਦਨ ਲਈ StackBlitz ਵਿੱਚ ਉਦਾਹਰਨ ਵੀ ਖੋਲ੍ਹ ਸਕਦੇ ਹੋ।

ਸਥਾਪਨਾ ਕਰਨਾ

ਅਸੀਂ ਸਕ੍ਰੈਚ ਤੋਂ ਬੂਟਸਟਰੈਪ ਦੇ ਨਾਲ ਇੱਕ Vite ਪ੍ਰੋਜੈਕਟ ਬਣਾ ਰਹੇ ਹਾਂ, ਇਸਲਈ ਅਸਲ ਵਿੱਚ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਕੁਝ ਪੂਰਵ-ਲੋੜਾਂ ਅਤੇ ਅਗਲੇ ਪੜਾਅ ਹਨ। ਇਸ ਗਾਈਡ ਲਈ ਤੁਹਾਨੂੰ Node.js ਸਥਾਪਤ ਕਰਨ ਅਤੇ ਟਰਮੀਨਲ ਨਾਲ ਕੁਝ ਜਾਣੂ ਹੋਣ ਦੀ ਲੋੜ ਹੈ।

ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਐਨਪੀਐਮ ਸੈੱਟਅੱਪ ਕਰੋ। ਅਸੀਂ my-projectਫੋਲਡਰ ਬਣਾਵਾਂਗੇ ਅਤੇ npm ਨੂੰ -yਆਰਗੂਮੈਂਟ ਨਾਲ ਸ਼ੁਰੂ ਕਰਾਂਗੇ ਤਾਂ ਜੋ ਇਹ ਸਾਨੂੰ ਸਾਰੇ ਇੰਟਰਐਕਟਿਵ ਸਵਾਲ ਪੁੱਛਣ ਤੋਂ ਬਚ ਸਕੇ।
```
mkdir my-project && cd my-project
npm init -y
```
Vite ਇੰਸਟਾਲ ਕਰੋ। ਸਾਡੀ ਵੈਬਪੈਕ ਗਾਈਡ ਦੇ ਉਲਟ, ਇੱਥੇ ਸਿਰਫ਼ ਇੱਕ ਹੀ ਬਿਲਡ ਟੂਲ ਨਿਰਭਰਤਾ ਹੈ। ਅਸੀਂ --save-devਇਹ ਸੰਕੇਤ ਦੇਣ ਲਈ ਵਰਤਦੇ ਹਾਂ ਕਿ ਇਹ ਨਿਰਭਰਤਾ ਸਿਰਫ ਵਿਕਾਸ ਲਈ ਹੈ ਨਾ ਕਿ ਉਤਪਾਦਨ ਲਈ।
```
npm i --save-dev vite
```
ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰੋ। ਹੁਣ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹਾਂ। ਅਸੀਂ ਪੌਪਰ ਨੂੰ ਵੀ ਸਥਾਪਿਤ ਕਰਾਂਗੇ ਕਿਉਂਕਿ ਸਾਡੇ ਡ੍ਰੌਪਡਾਉਨ, ਪੌਪਓਵਰ ਅਤੇ ਟੂਲਟਿਪਸ ਉਹਨਾਂ ਦੀ ਸਥਿਤੀ ਲਈ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਜੇਕਰ ਤੁਸੀਂ ਉਹਨਾਂ ਭਾਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਯੋਜਨਾ ਨਹੀਂ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਥੇ ਪੌਪਰ ਨੂੰ ਛੱਡ ਸਕਦੇ ਹੋ।
```
npm i --save bootstrap @popperjs/core
```
ਵਾਧੂ ਨਿਰਭਰਤਾ ਸਥਾਪਤ ਕਰੋ। Vite ਅਤੇ Bootstrap ਤੋਂ ਇਲਾਵਾ, Bootstrap ਦੇ 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 ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ ਕਿਉਂਕਿ ਅਸੀਂ 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 ਪੰਨਾ ਹੈ ਜੋ ਬੰਡਲ ਕੀਤੇ CSS ਅਤੇ JS ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ Vite ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਲੋਡ ਹੋਵੇਗਾ ਜਿਸ ਨੂੰ ਅਸੀਂ ਬਾਅਦ ਦੇ ਪੜਾਵਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਾਂਗੇ।
```
<!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 ਅਤੇ JavaScript ਨੂੰ ਆਯਾਤ ਕਰਾਂਗੇ।

ਬੂਟਸਟਰੈਪ ਆਯਾਤ ਕਰੋ

ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦਾ 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
  }
}
```
ਹੁਣ, ਆਉ ਬੂਟਸਟਰੈਪ ਦਾ CSS ਆਯਾਤ ਕਰੀਏ। src/scss/styles.scssਬੂਟਸਟਰੈਪ ਦੇ ਸਾਰੇ ਸਰੋਤ Sass ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਹੇਠਾਂ ਸ਼ਾਮਲ ਕਰੋ ।
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
ਜੇਕਰ ਤੁਸੀਂ ਚਾਹੋ ਤਾਂ ਤੁਸੀਂ ਸਾਡੀਆਂ ਸਟਾਈਲਸ਼ੀਟਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਵੀ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ। ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ Sass ਆਯਾਤ ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ।
ਅੱਗੇ ਅਸੀਂ CSS ਲੋਡ ਕਰਦੇ ਹਾਂ ਅਤੇ ਬੂਟਸਟਰੈਪ ਦੀ JavaScript ਨੂੰ ਆਯਾਤ ਕਰਦੇ ਹਾਂ। CSS ਨੂੰ ਲੋਡ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੇ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ src/js/main.jsਅਤੇ ਬੂਟਸਟਰੈਪ ਦੇ ਸਾਰੇ 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';
```
ਬੂਟਸਟਰੈਪ ਦੇ ਪਲੱਗਇਨਾਂ ਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ ਇਸ ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਪੜ੍ਹੋ ।
ਅਤੇ ਤੁਸੀਂ ਪੂਰਾ ਕਰ ਲਿਆ! 🎉 ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ Sass ਅਤੇ JS ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੋਣ ਨਾਲ, ਤੁਹਾਡਾ ਸਥਾਨਕ ਵਿਕਾਸ ਸਰਵਰ ਹੁਣ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ।

ਹੁਣ ਤੁਸੀਂ ਕੋਈ ਵੀ ਬੂਟਸਟਰੈਪ ਭਾਗ ਜੋੜਨਾ ਸ਼ੁਰੂ ਕਰ ਸਕਦੇ ਹੋ ਜੋ ਤੁਸੀਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਵਾਧੂ ਕਸਟਮ ਸਾਸ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਅਤੇ ਬੂਟਸਟਰੈਪ ਦੇ CSS ਅਤੇ JS ਦੇ ਸਿਰਫ਼ ਉਹਨਾਂ ਹਿੱਸਿਆਂ ਨੂੰ ਆਯਾਤ ਕਰਕੇ ਆਪਣੇ ਬਿਲਡ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾਉਣ ਲਈ ਪੂਰੇ Vite ਉਦਾਹਰਨ ਪ੍ਰੋਜੈਕਟ ਦੀ ਜਾਂਚ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ ਜਿਸਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ।

ਇੱਥੇ ਕੁਝ ਗਲਤ ਜਾਂ ਪੁਰਾਣਾ ਦੇਖਿਆ? ਕਿਰਪਾ ਕਰਕੇ GitHub 'ਤੇ ਕੋਈ ਮੁੱਦਾ ਖੋਲ੍ਹੋ । ਸਮੱਸਿਆ ਨਿਪਟਾਰੇ ਲਈ ਮਦਦ ਦੀ ਲੋੜ ਹੈ? GitHub 'ਤੇ ਖੋਜ ਕਰੋ ਜਾਂ ਚਰਚਾ ਸ਼ੁਰੂ ਕਰੋ ।