ପାର୍ସଲ

ପାର୍ସଲ୍ ବ୍ୟବହାର କରି କିପରି ତୁମର ପ୍ରୋଜେକ୍ଟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯିବ ଶିଖ |

ଏହି ପୃଷ୍ଠାରେ |

ପାର୍ସଲ୍ ସଂସ୍ଥାପନ କରନ୍ତୁ |

ବୁଟଷ୍ଟ୍ରାପ୍ ସଂସ୍ଥାପନ କରନ୍ତୁ |

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

ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମଦାନୀ କରୁଛି |

ଆପଣଙ୍କର ଆପର ଏଣ୍ଟ୍ରି ପଏଣ୍ଟରେ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଜାଭାସ୍କ୍ରିପ୍ଟ ଆମଦାନୀ କରନ୍ତୁ (ସାଧାରଣତ 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 ଆମଦାନି କରୁଛି |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ପୂର୍ଣ୍ଣ ସମ୍ଭାବନାକୁ ବ୍ୟବହାର କରିବାକୁ ଏବଂ ଏହାକୁ ତୁମର ଆବଶ୍ୟକତା ଅନୁଯାୟୀ କଷ୍ଟମାଇଜ୍ କରିବାକୁ, ଉତ୍ସ ଫାଇଲଗୁଡ଼ିକୁ ତୁମର ପ୍ରୋଜେକ୍ଟର ବଣ୍ଡଲିଂ ପ୍ରକ୍ରିୟାର ଏକ ଅଂଶ ଭାବରେ ବ୍ୟବହାର କର |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ସାସ୍ ଫାଇଲଗୁଡିକ ଆମଦାନୀ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

ପାର୍ସଲ