HTML සහ JavaScript ගැන මූලික දැනුමක් තියෙන නමුත් npm වගේ නවතම JavaScript මෙවලම් ගැන නොදන්නා බොහෝ දෙනාට තෙවන පාර්ශව Web Component එකක් එකතු කිරීම අභියෝගයක් විය හැකිය. මේ ගැන මිතුරෙකු සමඟ සිදු වූ සංවාදයක් අපට සරල මාර්ගෝපදේශයක් ලියීමට ප්රේරණය කළා.
ඔහු GitHub එකේ ලැබූ relative-time-element නමැති component එකක් HTML ගොනුවකට එක් කරන්න අවශ්ය වුනා. ලේඛන වල “npm install @github/relative-time-element” සහ “import '@github/relative-time-element'” වැනි උපදෙස් තිබුණාත්, <script> ටැග් එකේ කොහෙද එය තබන්න කියලා පැහැදිලි නොවුණා. එම නිසා අපි පියවරෙන් පියවර ක්රියාමාර්ගයක් සකස් කළෙමු.
1. Component එක තෝරාගැනීම – GitHub හෝ npm වෙතින් අවශ්ය component එක බාගත කරගන්න. මේ උදාහරණයෙහි <relative-time> ටැග් එක භාවිතා කරමු.
2. ව්යාපෘතිය සකස් කිරීම – Node.js (npm සමඟ) ස්ථාපනය කර, Vite වැනි bundler එකක් භාවිතා කරමු. npm create --yes vite@latest . -- --template vanilla --no-interactive කමාන්ඩ් එකෙන් ව්යාපෘති රූපය තැනෙයි. අනවශ්ය ගොනු මකා දමා, npm install @github/relative-time-element මඟින් component එක ස්ථාපනය කරමු.
3. HTML සහ JavaScript ගොනු සෑදීම – src/main.js ගොනුවේ import '@github/relative-time-element'; යන පේළිය එක් කරමු. පසුව, ව්යාපෘති මූල ගොනුව index.html තුළ <relative-time datetime="2026-07-24T16:30:00-08:00"></relative-time> ටැග් එක සහ <script type="module" src="src/main.js"></script> යොදමු.
4. Build සහ Deploy කිරීම – npm run build කමාන්ඩ් එකෙන් dist/ ෆෝල්ඩරයට නිර්මාණය වූ optimized ගොනු ලැබේ. මේ ගොනු ඕනෑම වෙබ් සර්වර් එකකට උඩුගත කර භාවිතා කළ හැකිය.
ශ්රී ලංකාවට ඇති වැදගත්කම
මෙම පියවර‑පියවර මාර්ගෝපදේශය ශ්රී ලංකාවේ තරුණ සංවර්ධකයින්ට නවතම JavaScript පද්ධතිවලට පහසු පිවිසුමක් සපයයි. npm සහ Vite වැනි මෙවලම් ගැඹුරු දැනුමක් නැතිවත්, open‑source component එකක් වඩාත් කාර්යක්ෂමව ව්යාපෘති තුළ ඇතුළත් කළ හැකිය.
- විශ්ව විද්යාල සහ පළපුරුදු පාඨමාලා – අධ්යාපන ආයතනවලට practical workshop එකක් ලෙස භාවිතා කළ හැකිය.
- ව්යාපාරික වෙබ් යෙදුම් – කාලය, දිනය, countdown වැනි UI element එකක් ඉක්මනින් එකතු කර, පාරිභෝගික අත්දැකීම වර්ධනය කළ හැකිය.
- දෙවන පාර්ශව සමාජය – GitHub හි විවෘත කේත ප්රජාවට දායක වීමෙන්, ලංකා තාක්ෂණික පරිසරය තවත් ශක්තිමත් වේ.
ඉතින්, npm, Vite, Web Component යන තාක්ෂණික පදනම් අවබෝධ කර ගත් පසු, ඔබේ ඕනෑම HTML ගොනුවක් modern UI එකකින් පිරවීමට අවශ්ය සියලු උපකරණ ඔබට ලැබේ. දැන් ඔබත් ඔබේ ව්යාපෘතියේ කාලය සලකුණු කර, අලුත් පරිසරයකට පියවර තබන්න.
