Bootstrap සහ Webpack
Webpack භාවිතයෙන් Bootstrap හි CSS සහ JavaScript ඔබගේ ව්‍යාපෘතියට ඇතුළත් කරන්නේ කෙසේද යන්න පිළිබඳ නිල මාර්ගෝපදේශය.
සැලසුම
අපි මුල සිටම Bootstrap සමඟ Webpack ව්‍යාපෘතියක් ගොඩනඟමින් සිටිමු, එබැවින් අපට සැබවින්ම ආරම්භ කිරීමට පෙර යම් පූර්වාවශ්‍යතා සහ ඉදිරි පියවර තිබේ. මෙම මාර්ගෝපදේශය ඔබට Node.js ස්ථාපනය කර තිබීම සහ ටර්මිනලය සමඟ යම් හුරුපුරුදුකමක් අවශ්‍ය වේ.
-
ව්යාපෘති ෆෝල්ඩරයක් සාදා npm සකසන්න. අපි ෆෝල්ඩරය සාදා එය අපෙන් සියලු අන්තර්ක්‍රියාකාරී ප්‍රශ්න ඇසීම වැළැක්වීම
my-projectසඳහා තර්කය සමඟ npm ආරම්භ කරන්නෙමු.-ymkdir my-project && cd my-project npm init -y -
Webpack ස්ථාපනය කරන්න. මීළඟට අපි අපගේ Webpack සංවර්ධන පරායත්තතා ස්ථාපනය කළ යුතුය: Webpack
webpackහි හරය සඳහා,webpack-cliඅපට ටර්මිනලයෙන් Webpack විධානයන් ක්‍රියාත්මක කළwebpack-dev-serverහැකි අතර එමඟින් අපට දේශීය සංවර්ධන සේවාදායකයක් ක්‍රියාත්මක කළ හැකිය.--save-devමෙම පරායත්තතා සංවර්ධනය සඳහා පමණක් වන අතර නිෂ්පාදනය සඳහා නොවන බව අපි සංඥා කිරීමට භාවිතා කරමු .npm i --save-dev webpack webpack-cli webpack-dev-server -
Bootstrap ස්ථාපනය කරන්න. දැන් අපිට Bootstrap ස්ථාපනය කරන්න පුළුවන්. අපගේ dropdowns, popovers, සහ මෙවලම් ඉඟි ඒවායේ ස්ථානගත කිරීම සඳහා රඳා පවතින බැවින් අපි Popper ස්ථාපනය කරන්නෙමු. ඔබ එම සංරචක භාවිතා කිරීමට සැලසුම් නොකරන්නේ නම්, ඔබට මෙහි පොපර් ඉවත් කළ හැක.
npm i --save bootstrap @popperjs/core -
අමතර පරායත්තතා ස්ථාපනය කරන්න. Webpack සහ Bootstrap වලට අමතරව, Webpack සමඟ Bootstrap හි CSS සහ JS නිසි ලෙස ආයාත කිරීමට සහ බණ්ඩල් කිරීමට අපට තවත් පරායත්තතා කිහිපයක් අවශ්‍ය වේ. මේවාට Sass, සමහර loaders සහ Autoprefixer ඇතුළත් වේ.
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
දැන් අපට අවශ්‍ය සියලු පරායත්තතා ස්ථාපනය කර ඇති බැවින්, අපට ව්යාපෘති ගොනු සෑදීමට සහ Bootstrap ආනයනය කිරීමට වැඩට යා හැක.
ව්යාපෘති ව්යුහය
අපි දැනටමත් my-projectෆෝල්ඩරය සාදා npm ආරම්භ කර ඇත. දැන් අපි ව්යාපෘති ව්යුහය වට කිරීමට අපගේ srcසහ ෆෝල්ඩර ද සාදන්නෙමු. distපහත දැක්වෙන my-projectෆෝල්ඩරය සහ ගොනු ව්යුහය අතින් තනන්න, නැතහොත් පහතින් ධාවනය කරන්න.
mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js
ඔබ අවසන් වූ විට, ඔබේ සම්පූර්ණ ව්‍යාපෘතිය මෙලෙස දිස්විය යුතුය:
my-project/
├── dist/
│ └── index.html
├── src/
│ ├── js/
│ │ └── main.js
│ └── scss/
│ └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js
මෙම අවස්ථාවේදී, සියල්ල නිවැරදි ස්ථානයේ ඇත, නමුත් Webpack ක්‍රියා නොකරනු ඇත, මන්ද අප තවමත් අපගේ ඒවා පුරවා webpack.config.jsනැත.
Webpack වින්‍යාස කරන්න
පරායත්තතා ස්ථාපනය කර ඇති අතර අපගේ ව්යාපෘති ෆෝල්ඩරය කේතීකරණය ආරම්භ කිරීමට සූදානම් වන විට, අපට දැන් Webpack වින්‍යාස කර අපගේ ව්‍යාපෘතිය දේශීයව ක්‍රියාත්මක කළ හැක.
-
webpack.config.jsඔබේ සංස්කාරකයේ විවෘත කරන්න. එය හිස් බැවින්, අපට අපගේ සේවාදායකය ආරම්භ කිරීමට හැකි වන පරිදි එයට බොයිලේරු තහඩු වින්‍යාස කිහිපයක් එක් කිරීමට අවශ්‍ය වනු ඇත. වින්‍යාසයේ මෙම කොටස Webpack හට අපගේ ව්‍යාපෘතියේ ජාවාස්ක්‍රිප්ට් සෙවීම, ( ) වෙත සම්පාදනය කරන ලද කේතය ප්‍රතිදානය කළ යුත්තේ කොතැනද සහ සංවර්ධන සේවාදායකය හැසිරිය යුතු ආකාරය ( උණුසුම් රීලෝඩ් සමඟින් ෆෝල්ඩරයෙන්distඇද ගැනීම ) වෙත කියයි.distconst path = require('path') module.exports = { entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true } } -
ඊළඟට අපි අපේ පුරවන්න
dist/index.html. මෙය Bundled CSS සහ JS භාවිතා කිරීමට Webpack බ්‍රවුසරයේ පූරණය වන HTML පිටුවයි. ඒක කරන්න කලින් අපි ඒකට render කරන්න දෙයක් දීලාoutputකලින් පියවරෙන් JS ඇතුලත් කරන්න ඕන.<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap w/ Webpack</title> </head> <body> <div class="container py-4 px-3 mx-auto"> <h1>Hello, Bootstrap and Webpack!</h1> <button class="btn btn-primary">Primary button</button> </div> <script src="./main.js"></script> </body> </html>Webpack මගින් Bootstrap හි CSS පූරණය වන විට අපට පෙනෙන පරිදි අපි
div class="container"මෙහි Bootstrap හැඩගැන්වීම් ටිකක් ඇතුළත් කරන්නෙමු.<button> -
Webpack ධාවනය කිරීමට දැන් අපට npm ස්ක්‍රිප්ට් එකක් අවශ්‍ය වේ. පහත පෙන්වා ඇති ස්ක්‍රිප්ට් එක විවෘත
package.jsonකර එක් කරන්නstart(ඔබට දැනටමත් පරීක්ෂණ පිටපත තිබිය යුතුය). අපගේ දේශීය Webpack dev සේවාදායකය ආරම්භ කිරීමට අපි මෙම ස්ක්‍රිප්ට් භාවිතා කරන්නෙමු.{ // ... "scripts": { "start": "webpack serve --mode development", "test": "echo \"Error: no test specified\" && exit 1" }, // ... } -
අවසාන වශයෙන්, අපට Webpack ආරම්භ කළ හැකිය. ඔබගේ ටර්මිනලයේ ඇති
my-projectෆෝල්ඩරයෙන්, අලුතින් එකතු කරන ලද npm ස්ක්‍රිප්ට් එක ධාවනය කරන්න:npm start
මෙම මාර්ගෝපදේශයේ මීළඟ සහ අවසාන කොටසේදී, අපි Webpack loaders පිහිටුවා Bootstrap හි සියලුම CSS සහ JavaScript ආයාත කරන්නෙමු.
Bootstrap ආනයනය කරන්න
Webpack වෙත Bootstrap ආයාත කිරීම සඳහා අපි පළමු කොටසේ ස්ථාපනය කර ඇති loaders අවශ්‍ය වේ. අපි ඒවා npm සමඟ ස්ථාපනය කර ඇත, නමුත් දැන් Webpack ඒවා භාවිතා කිරීමට වින්‍යාසගත කළ යුතුය.
-
තුළ පැටවුම් සකසන්න
webpack.config.js. ඔබගේ වින්‍යාස ගොනුව දැන් සම්පුර්ණ කර ඇති අතර පහත කොටසට ගැළපිය යුතුය. මෙහි ඇති එකම නව කොටසmoduleකොටසයි.const path = require('path') module.exports = { entry: './src/js/main.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, devServer: { static: path.resolve(__dirname, 'dist'), port: 8080, hot: true }, module: { rules: [ { test: /\.(scss)$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: () => [ require('autoprefixer') ] } } }, { loader: 'sass-loader' } ] } ] } }මෙන්න මේ සියලු ලෝඩර් අපට අවශ්‍ය වන්නේ ඇයිද යන්න පිළිබඳ නැවත විස්තරයක්. HTML පිටුවේ ඇති මූලද්‍රව්‍යයකට
style-loaderCSS එන්නත් කරයි, භාවිතා කිරීමට උදවු කරයි සහ , Autoprefixer සඳහා අවශ්‍ය වේ, සහ අපට Sass භාවිතා කිරීමට ඉඩ සලසයි.<style><head>css-loader@importurl()postcss-loadersass-loader -
දැන් අපි Bootstrap හි CSS ආයාත කරමු.
src/scss/styles.scssBootstrap හි සියලු මූලාශ්‍ර Sass ආයාත කිරීමට පහත ඒවා එකතු කරන්න .// Import all of Bootstrap's CSS @import "~bootstrap/scss/bootstrap";ඔබට අවශ්‍ය නම් අපගේ මෝස්තර පත්‍ර ඔබට තනි තනිව ආනයනය කළ හැක. විස්තර සඳහා අපගේ Sass ආනයන ලේඛන කියවන්න .
-
ඊළඟට අපි CSS පූරණය කර Bootstrap හි JavaScript ආයාත කරමු.
src/js/main.jsCSS පූරණය කිරීමට සහ Bootstrap හි සියලුම JS ආයාත කිරීමට පහත ඒවා එකතු කරන්න . Bootstrap හරහා Poper ස්වයංක්‍රීයව ආනයනය කරනු ලැබේ.// Import our custom CSS import '../scss/styles.scss' // Import all of Bootstrap's JS import * as bootstrap from 'bootstrap'බණ්ඩල් ප්‍රමාණය අඩු කර ගැනීමට අවශ්‍ය පරිදි ඔබට JavaScript ප්ලගීන තනි තනිව ආයාත කළ හැක:
import Alert from 'bootstrap/js/dist/alert' // or, specify which plugins you need: import { Tooltip, Toast, Popover } from 'bootstrap'Bootstrap හි ප්ලගීන භාවිතා කරන්නේ කෙසේද යන්න පිළිබඳ වැඩිදුර තොරතුරු සඳහා අපගේ JavaScript docs කියවන්න .
-
සහ ඔබ අවසන්! 🎉 Bootstrap හි මූලාශ්‍රය Sass සහ JS සම්පුර්ණයෙන්ම පූරණය කර ඇති විට, ඔබගේ ප්‍රාදේශීය සංවර්ධන සේවාදායකය දැන් මේ ආකාරයෙන් දිස්විය යුතුය.
දැන් ඔබට භාවිතා කිරීමට අවශ්‍ය ඕනෑම Bootstrap සංරචක එකතු කිරීම ආරම්භ කළ හැක. ඔබට අවශ්‍ය Bootstrap හි CSS සහ JS කොටස් පමණක් ආයාත කිරීමෙන් අමතර අභිරුචි Sass ඇතුළත් කර ඔබේ ගොඩනැගීම ප්‍රශස්ත කරන්නේ කෙසේද යන්න සඳහා සම්පූර්ණ Webpack උදාහරණ ව්‍යාපෘතිය පරීක්ෂා කිරීමට වග බලා ගන්න .
නිෂ්පාදන ප්‍රශස්තිකරණය
ඔබගේ සැකසුම මත පදනම්ව, නිෂ්පාදනයේ ව්‍යාපෘතිය ක්‍රියාත්මක කිරීම සඳහා ප්‍රයෝජනවත් අමතර ආරක්‍ෂාව සහ වේග ප්‍රශස්තකරණයන් ක්‍රියාත්මක කිරීමට ඔබට අවශ්‍ය විය හැකිය. මෙම ප්‍රශස්තකරණයන් Webpack උදාහරණ ව්‍යාපෘතියට අදාළ නොවන අතර ක්‍රියාත්මක කිරීම ඔබ සතු බව සලකන්න.
CSS උපුටා ගැනීම
අප ඉහත style-loaderවින්‍යාස කර ඇති පරිදි පහසුවෙන් CSS බණ්ඩලය තුළට විමෝචනය කරයි, එවිට CSS ගොනුවක් අතින් පූරණය කිරීම dist/index.htmlඅවශ්‍ය නොවේ. මෙම ප්‍රවේශය දැඩි අන්තර්ගත ආරක්ෂණ ප්‍රතිපත්තියක් සමඟ ක්‍රියා නොකරනු ඇත, කෙසේ වෙතත්, විශාල මිටි ප්‍රමාණය හේතුවෙන් එය ඔබගේ යෙදුමට බාධාවක් විය හැක.
CSS වෙන් කිරීමට, අපට එය කෙලින්ම පූරණය කළ හැකි පරිදි , Webpack ප්ලගිනය dist/index.htmlභාවිතා කරන්න .mini-css-extract-loader
පළමුව, ප්ලගිනය ස්ථාපනය කරන්න:
npm install --save-dev mini-css-extract-plugin
ඉන්පසු Webpack වින්‍යාසය තුළ ඇති ප්ලගිනය ක්ෂණිකව භාවිතා කරන්න:
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/js/main.js',
+ plugins: [new miniCssExtractPlugin()],
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
test: /\.(scss)$/,
use: [
{
- // Adds CSS to the DOM by injecting a `<style>` tag
- loader: 'style-loader'
+ // Extracts CSS for each JS file that includes CSS
+ loader: miniCssExtractPlugin.loader
},
{
නැවත ධාවනය කිරීමෙන් පසු npm run build, නව ගොනුවක් dist/main.cssවනු ඇත, එය විසින් ආනයනය කරන ලද සියලුම CSS අඩංගු වනු ඇත src/js/main.js. ඔබ dist/index.htmlදැන් ඔබගේ බ්‍රවුසරයේ බලන්නේ නම්, එය දැන් ඇති ආකාරයටම විලාසය අතුරුදහන් වනු ඇත dist/main.css. ඔබට මේ ආකාරයට ජනනය කරන ලද CSS ඇතුළත් කළ හැකිය dist/index.html:
--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="./main.css">
<title>Bootstrap w/ Webpack</title>
</head>
<body>
SVG ගොනු උපුටා ගැනීම
data:Bootstrap හි CSS හි පේළිගත URI හරහා SVG ගොනු වෙත බහු යොමු කිරීම් ඇතුළත් වේ . පින්තූර සඳහා URI අවහිර කරන ඔබේ ව්‍යාපෘතිය සඳහා අන්තර්ගත ආරක්ෂණ ප්‍රතිපත්තියක් ඔබ නිර්වචනය කරන්නේ නම් data:, මෙම SVG ගොනු පූරණය නොවේ. Webpack හි වත්කම් මොඩියුල විශේෂාංගය භාවිතයෙන් පේළිගත SVG ගොනු උපුටා ගැනීමෙන් ඔබට මෙම ගැටලුව මඟහරවා ගත හැක.
මෙවැනි පේළිගත SVG ගොනු උපුටා ගැනීමට Webpack වින්‍යාස කරන්න:
--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
},
module: {
rules: [
+ {
+ mimetype: 'image/svg+xml',
+ scheme: 'data',
+ type: 'asset/resource',
+ generator: {
+ filename: 'icons/[hash].svg'
+ }
+ },
{
test: /\.(scss)$/,
use: [
නැවත ධාවනය කිරීමෙන් පසුව npm run build, ඔබට dist/iconsCSS වෙතින් උපුටා ගත් SVG ගොනු සහ නිසි ලෙස යොමු කර ඇති බව ඔබට පෙනෙනු ඇත.
මෙහි යම් වරදක් හෝ යල් පැන ගිය දෙයක් දකින්නේද? කරුණාකර GitHub හි ගැටලුවක් විවෘත කරන්න . දෝශ නිරාකරණයට උදවු අවශ්‍යද? GitHub මත සොයන්න හෝ සාකච්ඡාවක් ආරම්භ කරන්න .