ਪਾਰਸਲ

ਪਾਰਸਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਬਾਰੇ ਜਾਣੋ।

ਇਸ ਪੰਨੇ 'ਤੇ

ਪਾਰਸਲ ਸਥਾਪਿਤ ਕਰੋ

ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰੋ

npm ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬੂਟਸਟਰੈਪ ਨੂੰ Node.js ਮੋਡੀਊਲ ਵਜੋਂ ਸਥਾਪਿਤ ਕਰੋ।

ਬੂਟਸਟਰੈਪ ਪੌਪਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ , ਜੋ ਕਿ ਵਿਸ਼ੇਸ਼ਤਾ ਵਿੱਚ ਦਰਸਾਏ ਗਏ peerDependenciesਹਨ। ਇਸਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣਾ ਹੋਵੇਗਾ ਕਿ ਉਹਨਾਂ ਦੋਵਾਂ ਨੂੰ ਆਪਣੀ package.jsonਵਰਤੋਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਹੋਵੇਗਾ npm install @popperjs/core।

ਜਦੋਂ ਸਭ ਕੁਝ ਪੂਰਾ ਹੋ ਜਾਵੇਗਾ, ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਬਣਾਇਆ ਜਾਵੇਗਾ:

project-name/
├── build/
├── node_modules/
│   └── bootstrap/
│   └── popper.js/
├── scss/
│   └── custom.scss
├── src/
│   └── index.html
│   └── index.js
└── package.json

JavaScript ਆਯਾਤ ਕਰ ਰਿਹਾ ਹੈ

ਆਪਣੇ ਐਪ ਦੇ ਐਂਟਰੀ ਪੁਆਇੰਟ (ਆਮ ਤੌਰ 'ਤੇ) ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ JavaScript ਨੂੰ ਆਯਾਤ ਕਰੋ src/index.js। ਤੁਸੀਂ ਸਾਡੇ ਸਾਰੇ ਪਲੱਗਇਨਾਂ ਨੂੰ ਇੱਕ ਫਾਈਲ ਵਿੱਚ ਜਾਂ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਆਯਾਤ ਕਰ ਸਕਦੇ ਹੋ ਜੇਕਰ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਦੇ ਸਿਰਫ ਇੱਕ ਉਪ ਸਮੂਹ ਦੀ ਲੋੜ ਹੈ।

// Import all plugins
import * as bootstrap from 'bootstrap';

// Or import only needed plugins
import { Tooltip as Tooltip, Toast as Toast, Popover as Popover } from 'bootstrap';

// Or import just one
import Alert as Alert from '../node_modules/bootstrap/js/dist/alert';

CSS ਆਯਾਤ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ

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

ਬੂਟਸਟਰੈਪ ਦੀਆਂ Sass ਫਾਈਲਾਂscss/custom.scss ਨੂੰ ਆਯਾਤ ਕਰਨ ਲਈ ਆਪਣੀ ਖੁਦ ਦੀ ਬਣਾਓ ਅਤੇ ਫਿਰ ਬਿਲਟ-ਇਨ ਕਸਟਮ ਵੇਰੀਏਬਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰੋ ।

ਐਪ ਬਣਾਓ

src/index.jsਸਮਾਪਤੀ </body>ਟੈਗ ਤੋਂ ਪਹਿਲਾਂ ਸ਼ਾਮਲ ਕਰੋ ।

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

ਸੰਪਾਦਿਤ ਕਰੋ`package.json`

ਆਪਣੀ ਫਾਈਲ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ devਅਤੇ buildਸਕ੍ਰਿਪਟਾਂ .package.json

"scripts": {
  "dev": "parcel ./src/index.html",
  "prebuild": "npx rimraf build",
  "build": "parcel build --public-url ./ ./src/index.html --experimental-scope-hoisting --out-dir build"
}

dev ਸਕ੍ਰਿਪਟ ਚਲਾਓ

ਤੁਹਾਡੀ ਐਪ 'ਤੇ ਪਹੁੰਚਯੋਗ ਹੋਵੇਗੀ http://127.0.0.1:1234।

npm run dev

ਐਪ ਫਾਈਲਾਂ ਬਣਾਓ

ਬਿਲਟ ਫਾਈਲਾਂ build/ਫੋਲਡਰ ਵਿੱਚ ਹਨ।

npm run build

ਪਾਰਸਲ