ਪਾਰਸਲ
ਪਾਰਸਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ ਬਾਰੇ ਜਾਣੋ।
ਪਾਰਸਲ ਸਥਾਪਿਤ ਕਰੋ
ਪਾਰਸਲ ਬੰਡਲਰ ਸਥਾਪਿਤ ਕਰੋ ।
ਬੂਟਸਟਰੈਪ ਇੰਸਟਾਲ ਕਰੋ
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