Module, Node និង npm

មាតិកា

1. ហេតុអ្វីត្រូវបំបែកកូដរបស់អ្នក
2. Named Export និង Import
3. Default Export
4. ការប្រើ Module ក្នុង Browser
5. ការដំណើរការ JavaScript ជាមួយ Node
6. npm និង package.json
7. ការដំឡើង Package
8. npm Script និង Version
9. សាកល្បងដោយខ្លួនឯង

1. ហេតុអ្វីត្រូវបំបែកកូដរបស់អ្នក

នៅជំពូកមុន អ្នកបានបង្កើត array នៃ object និង function សម្រាប់ធ្វើការជាមួយវា។ ប្រសិនបើអ្នកបន្តបន្ថែមទៅក្នុងឯកសារតែមួយ វានឹងក្លាយជាទំព័រវែងដែលពិបាកអាន ពិបាកស្វែងរក និងពិបាកកែប្រែដោយមិនធ្វើឲ្យអ្វីខូច។

ដំណោះស្រាយគឺបំបែកកូដជា module។ module គឺគ្រាន់តែជាឯកសារមួយដែលសម្រេចថា value ណាខ្លះត្រូវចែករំលែកទៅឯកសារផ្សេង និងណាខ្លះនៅជាឯកជន។ module ល្អផ្តល់ឲ្យអ្នកនូវ៖

• ឈ្មោះច្បាស់លាស់។ projects.js ផ្ទុកទិន្នន័យ project។ helpers.js ផ្ទុក function ជំនួយតូចៗ។ អ្នកដឹងថាត្រូវរកនៅទីណា។
• គ្មានការជាន់ឈ្មោះដោយចៃដន្យ។ ឯកសារពីរអាចមាន variable ឈ្មោះ total ដូចគ្នា ដោយមិនប៉ះពាល់គ្នា។
• ការប្រើឡើងវិញ។ function តែមួយអាចត្រូវបាន import ដោយឯកសារច្រើន។

ប្រព័ន្ធ module ដែលភ្ជាប់មកជាមួយ JavaScript ហៅថា ES module (ESM)។ វាប្រើ keyword ពីរ៖ export ដើម្បីចែករំលែកអ្វីមួយ និង import ដើម្បីប្រើអ្វីដែលឯកសារផ្សេងចែករំលែក។

2. Named Export និង Import

ទិន្នន័យ project របស់ Dara បច្ចុប្បន្នស្ថិតនៅក្នុង script តែមួយ។ សូមផ្លាស់វាទៅឯកសារផ្ទាល់ខ្លួន។ ក្នុង folder dara-profile បង្កើត folder js និងឯកសារ js/projects.js៖

export const projects = [
  { id: 1, title: "Personal Profile", tags: ["html", "css"], year: 2025 },
  { id: 2, title: "Budget Tracker", tags: ["javascript"], year: 2026 },
  { id: 3, title: "Weather Card", tags: ["html", "javascript"], year: 2026 },
];

ពាក្យ export នៅពីមុខ const ធ្វើឲ្យ projects អាចប្រើបានដោយឯកសារផ្សេង។ ឥឡូវបង្កើត js/helpers.js ជាមួយ function តូចពីរ៖

export function formatYear(project) {
  return `${project.title} (${project.year})`;
}

export function filterByTag(list, tag) {
  return list.filter((project) => project.tags.includes(tag));
}

ឯកសារមួយអាចមាន named export ប៉ុន្មានក៏បាន។ ដើម្បីប្រើវា សូមសរសេរ statement import នៅក្នុងឯកសារទីបី js/main.js៖

import { projects } from "./projects.js";
import { formatYear, filterByTag } from "./helpers.js";

const jsProjects = filterByTag(projects, "javascript");

for (const project of jsProjects) {
  console.log(formatYear(project));
}

ច្បាប់បីដែលត្រូវចងចាំ៖

• ឈ្មោះក្នុង { } ត្រូវតែត្រូវនឹងឈ្មោះដែល export យ៉ាងពិតប្រាកដ។
• path ត្រូវចាប់ផ្តើមដោយ ./ (folder តែមួយ) ឬ ../ (folder មេ) ហើយត្រូវមានចុង .js។
• statement import ត្រូវនៅខាងលើបំផុតនៃឯកសារ។

អ្នកអាចប្តូរឈ្មោះពេល import ដោយប្រើ as ដែលជួយនៅពេល module ពីរ export ឈ្មោះដូចគ្នា៖

import { formatYear as formatProject } from "./helpers.js";

3. Default Export

module មួយក៏អាចមាន default export តែមួយ ដែលជាអ្វីដែលឯកសារនោះផ្តល់ជាចម្បង។

// js/theme.js
export default function toggleTheme(current) {
  return current === "dark" ? "light" : "dark";
}

អ្នក import default export ដោយគ្មាន ដង្កៀប ហើយអ្នកអាចជ្រើសឈ្មោះអ្វីក៏បាន៖

import toggleTheme from "./theme.js";

console.log(toggleTheme("light")); // "dark"

តើគួរប្រើមួយណា? Named export គឺជាទម្លាប់ដែលមានសុវត្ថិភាពជាងសម្រាប់អ្នកចាប់ផ្តើម ព្រោះឈ្មោះថេរ ហើយ editor របស់អ្នកអាច autocomplete វាបាន។ ប្រើ default export នៅពេលឯកសារមានគោលបំណងចម្បងតែមួយប៉ុណ្ណោះ។

4. ការប្រើ Module ក្នុង Browser

ដើម្បីប្រើ module ក្នុង index.html សូមកែ script tag ឲ្យមាន type="module"៖

<script type="module" src="js/main.js"></script>

attribute តែមួយនេះផ្លាស់ប្តូរបីយ៉ាង៖

1. import និង export ត្រូវបានអនុញ្ញាតក្នុង script។
2. script ត្រូវបាន defer ដោយស្វ័យប្រវត្តិ៖ វាដំណើរការបន្ទាប់ពី HTML ត្រូវបាន parse រួច ដូច្នេះអ្នកអាចដាក់ tag នៅក្នុង <head> ឬនៅចុងនៃ <body> ក៏បាន។
3. module នីមួយៗមាន scope ផ្ទាល់ខ្លួន។ variable ក្នុង main.js មិនមែនជា global variable ទេ ហើយ window.projects នឹងមិនមាន។

មានចំណុចមួយដែលត្រូវប្រយ័ត្ន។ browser បដិសេធមិនផ្ទុក module ពី address file:/// ដោយសារហេតុផលសុវត្ថិភាព។ ប្រសិនបើអ្នក double-click index.html console នឹងបង្ហាញ error អំពី CORS។ ចូរបើកទំព័រដោយ Live Server វិញ ដើម្បីឲ្យ address ចាប់ផ្តើមដោយ http://127.0.0.1:5500។ នេះគឺជាគំនិត client និង server ដូចគ្នាពី របៀបដែលវេបដំណើរការ៖ module ត្រូវបានទាញយកដោយ HTTP request ដូច្នេះអ្នកត្រូវការ server ទោះជា local ក៏ដោយ។

បើក DevTools ហើយជ្រើសរើស tab Network បន្ទាប់មក reload។ អ្នកនឹងឃើញ request បី៖ main.js, projects.js និង helpers.js។ browser អានបន្ទាត់ import ហើយទាញយកឯកសារនីមួយៗដែលវាត្រូវការ។

5. ការដំណើរការ JavaScript ជាមួយ Node

browser មិនមែនជាកន្លែងតែមួយគត់ដែល JavaScript ដំណើរការទេ។ Node.js គឺជាកម្មវិធីដែលដំណើរការ JavaScript នៅលើកុំព្យូទ័ររបស់អ្នក ដោយគ្មានទំព័រវេប។ វាប្រើ engine ដូចគ្នានឹង Chrome។ ពិនិត្យថាវាត្រូវបានដំឡើងហើយ៖

node --version

បង្កើតឯកសារ hello.mjs នៅក្នុង folder ណាមួយ៖

const name = "Dara";
console.log(`Hello from Node, ${name}!`);

ដំណើរការវា៖

node hello.mjs

extension .mjs ប្រាប់ Node ថា "ឯកសារនេះជា ES module"។ ប្រសិនបើអ្នកចង់ប្រើ extension .js ធម្មតា មានវិធីទីពីរ ដែលយើងនឹងរៀបចំនៅផ្នែកបន្ទាប់។ សូមកត់សម្គាល់ថា console.log បោះពុម្ពទៅ terminal របស់អ្នកនៅទីនេះ មិនមែន console របស់ browser ទេ។ Node គឺជារបៀបដែលអ្នកនឹងដំណើរការ test, build tool និង server នៅពេលក្រោយ។

module នៃ project របស់អ្នកប្រើតែ JavaScript ធម្មតា ហើយគ្មាន feature របស់ browser ទេ ដូច្នេះ Node អាចដំណើរការវាបានដែរ ពេលវាដឹងថាទាំងនោះជា module (មើលខាងក្រោម)។

Node គ្មាន object របស់ browser ដូចជា document និង window ទេ។ កូដដែលប៉ះពាល់ទំព័រត្រូវនៅក្នុង browser ចំណែកកូដដែលធ្វើការជាមួយទិន្នន័យតែប៉ុណ្ណោះអាចដំណើរការបានទាំងពីរ។

6. npm និង package.json

អ្នកសរសេរកម្មវិធីផ្សេងទៀតចែករំលែកកូដរបស់ពួកគេជា package។ npm (Node Package Manager) ត្រូវបានដំឡើងរួមជាមួយ Node ហើយវាទាញយក package ពី registry សាធារណៈនៅ npmjs.com។

រាល់ project ដែលប្រើ npm មានឯកសារឈ្មោះ package.json ដែលពិពណ៌នាអំពីវា។ បង្កើតមួយនៅក្នុង folder dara-profile៖

npm init -y

flag -y ទទួលយកចម្លើយលំនាំដើម។ បើកឯកសារថ្មី ហើយបន្ថែមបន្ទាត់ "type"៖

{
  "name": "dara-profile",
  "version": "1.0.0",
  "type": "module",
  "description": "Dara Sok's personal profile page",
  "scripts": {}
}

"type": "module" ប្រាប់ Node ឲ្យចាត់ទុកគ្រប់ឯកសារ .js ក្នុង project នេះជា ES module ដូច្នេះ node js/main.js ដំណើរការបានហើយ ដោយមិនចាំបាច់ប្តូរឈ្មោះអ្វីទេ។ ដំណើរការវា នោះអ្នកគួរតែឃើញចំណងជើង project ពីរត្រូវបានបោះពុម្ពនៅក្នុង terminal របស់អ្នក៖

Budget Tracker (2026)
Weather Card (2026)

JSON មានភាពតឹងរ៉ឹង៖ key និង string ប្រើសញ្ញាអញ្ជឹញគូ ហើយមិនអនុញ្ញាតឲ្យមានក្បៀសនៅចុងទេ។

7. ការដំឡើង Package

សន្មតថា Dara ចង់បង្ហាញកាលបរិច្ឆេទដូចជា "3 ខែមុន"។ ជំនួសឲ្យការសរសេរ logic នោះដោយខ្លួនឯង នាងដំឡើង package មួយ។ ដំឡើង date-fns៖

npm install date-fns

មានបីយ៉ាងកើតឡើង៖

1. folder មួយឈ្មោះ node_modules លេចឡើង។ វាផ្ទុក package និងអ្វីៗទាំងអស់ដែលវាពឹងផ្អែក ដែលអាចមានរាប់រយ folder។
2. package.json មានផ្នែក "dependencies" ដែលរាយ date-fns និង version របស់វា។
3. ឯកសារមួយឈ្មោះ package-lock.json កត់ត្រា version ពិតប្រាកដដែលបានដំឡើង ដើម្បីឲ្យគ្រប់កុំព្យូទ័រទទួលបានលទ្ធផលដូចគ្នា។

ឥឡូវប្រើ package នៅក្នុង Node៖

import { format } from "date-fns";

console.log(format(new Date(2026, 0, 15), "dd MMM yyyy"));

import ដែលគ្មាន ./ មានន័យថា "រកក្នុង node_modules"។ កម្មវិធីបោះពុម្ព 15 Jan 2026។

កុំ commit node_modules ដាច់ខាត។ វាធំ ហើយនរណាក៏អាចបង្កើតវាឡើងវិញពី package.json បាន។ ប្រាប់ Git ឲ្យមិនអើពើវាដោយបង្កើតឯកសារឈ្មោះ .gitignore ជាមួយបន្ទាត់នេះ៖

node_modules

Commit package.json និង package-lock.json។ នៅពេលមិត្តរួមក្រុម (ឬអ្នកនៅលើកុំព្យូទ័រផ្សេង) clone project នោះ command តែមួយស្តារអ្វីៗទាំងអស់៖

npm install

package ដែលអ្នកត្រូវការតែពេលអភិវឌ្ឍ (ឧបករណ៍ test, formatter) ត្រូវបានដំឡើងដោយ npm install --save-dev <name> ហើយលេចក្រោម "devDependencies"។

8. npm Script និង Version

ផ្នែក "scripts" រក្សាទុក command ក្រោមឈ្មោះខ្លីៗ។ កែ package.json៖

"scripts": {
  "start": "node js/main.js",
  "hello": "node hello.mjs"
}

ដំណើរការវាដោយ npm run៖

npm run hello
npm start

npm start គឺជាករណីពិសេសដែលមិនត្រូវការ run។ script កាន់តែមានតម្លៃនៅពេល command កាន់តែវែង ហើយវាផ្តល់ឲ្យគ្រប់ project នូវចំណុចចូលដំណើរការសាមញ្ញដូចគ្នា។

version របស់ package មើលទៅដូច ^3.6.0។ នេះគឺជា semantic versioning (semver)៖ MAJOR.MINOR.PATCH។

^ នៅខាងមុខមានន័យថា "ទទួលយក minor និង patch version ថ្មី ប៉ុន្តែមិនទទួល major version ថ្មីទេ"។ ដោយសារនេះ npm install នឹងមិនធ្វើឲ្យអ្នកភ្ញាក់ផ្អើលដោយការផ្លាស់ប្តូរដែលធ្វើឲ្យខូចទេ។

9. សាកល្បងដោយខ្លួនឯង

1. បំបែកទិន្នន័យ។ បង្កើត js/projects.js និង js/helpers.js ដូចបានបង្ហាញ។ import ទាំងពីរចូល js/main.js ហើយ log ចំណងជើង project នីមួយៗ។
2. បន្ថែម helper។ សរសេរ និង export sortByYear(list) ក្នុង helpers.js។ ប្រើ [...list].sort(...) ដើម្បីកុំឲ្យ array ដើមត្រូវបានកែប្រែ។ import វា ហើយបោះពុម្ពលទ្ធផល។
3. ធ្វើឲ្យ import ខូច។ លុប ./ ចេញពី "./projects.js" ឬសរសេរឈ្មោះ export ខុស។ អានសារ error នៅក្នុង console របស់ browser និងម្តងទៀតក្នុង Node។
4. សាកល្បង default export។ បង្កើត js/theme.js ជាមួយ default export ពីផ្នែកទី 3។ import វាក្រោមឈ្មោះខុសពីដើម។
5. បង្កើត package។ ដំណើរការ npm init -y បន្ថែម "type": "module" បង្កើត .gitignore ហើយដំឡើង package តូចណាមួយ។ មើលក្នុង node_modules បន្ទាប់មកលុប folder ហើយស្តារវាវិញដោយ npm install។
6. សរសេរ script ពីរ។ បន្ថែម script "start" និង "hello" ហើយដំណើរការទាំងពីរ។ បន្ទាប់មកពិនិត្យ tab Network ដើម្បីបញ្ជាក់ថា browser ផ្ទុកឯកសារ module ទាំងបីរបស់អ្នក។

បន្ទាប់ យើងនឹងភ្ជាប់ module ទាំងនេះទៅនឹងទំព័រផ្ទាល់ ដោយប្រើ DOM និង event ដើម្បីធ្វើឲ្យបញ្ជី project របស់ Dara អាចត្រង (filter) បាន។