Modules, npm and Vite

Why split code into modules?

One app.js with 2,000 lines is hard to read, and every variable in a classic script is shared with every other script, so names clash. A module is one file with its own private scope. It shares only what it exports, and it takes only what it imports.

// money.js
export const GST_RATE = 0.18;                 // named export
export function addGst(amount) {               // named export
  return Math.round(amount * (1 + GST_RATE));
}
export default function formatPrice(amount) {  // default export (one per file)
  return `Rs ${amount.toLocaleString('en-IN')}`;
}

// main.js
import formatPrice, { addGst, GST_RATE } from './money.js';
console.log(formatPrice(addGst(1000))); // Rs 1,180

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

• In the browser, paths start with ./ or ../ and include the .js ending.
• Each module runs once, even if many files import it.
• Modules use strict mode and have top-level await.
• Modules do not work from a file:// address; open the page through a local server (for example VS Code Live Server or Vite).

npm and package.json

npm (Node Package Manager) comes with Node.js. It downloads packages (code written by others) from the npm registry and runs commands for your project. package.json is the project's ID card: its name, its scripts and the packages it needs.

{
  "name": "kirana-shop",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "dayjs": "^1.11.13"
  },
  "devDependencies": {
    "vite": "^7.0.0"
  }
}

npm install            # install everything listed in package.json
npm install dayjs      # add a dependency
npm install -D eslint  # add a devDependency
npm run dev            # run the "dev" script
npm ci                 # clean install exactly from package-lock.json
npx prettier --write . # run a package's command without installing it globally

The ^ in "^1.11.13" is a version range. Versions have three numbers: major.minor.patch. ^ means "this version or any newer one with the same major number", so ^1.11.13 accepts 1.12.0 but not 2.0.0, because a new major version may break your code.

Start a project with Vite

npm create vite@latest kirana-shop
# choose a framework (Vanilla is plain JavaScript) and a variant
cd kirana-shop
npm install
npm run dev      # dev server, usually at http://localhost:5173
npm run build    # optimised files in the dist folder
npm run preview  # check the built site locally

Choosing safe packages

• Do you need it? A 5-line function is better than a new package.
• Is it popular and maintained? Check weekly downloads and the date of the last release on npmjs.com.
• How big is it? Every kilobyte is downloaded by phones on slow networks.
• Check the exact name: attackers publish look-alike names with one letter changed.
• Run npm audit to list known security problems in your packages, and update them.