JavaScript Modules & Tooling

// Without modules: one huge file
// 5000 lines of code — find what you need? Good luck!
 
// With modules: organized by purpose
// 📁 src/
//   ├── user.js       (user-related functions)
//   ├── api.js        (API calls)
//   ├── components/   (UI components)
//   └── utils.js      (helper functions)

// 📁 utils.js
export function formatDate(date) { ... }
export function capitalize(str) { ... }
export const MAX_SIZE = 100;
 
// 📁 app.js
import { formatDate, capitalize, MAX_SIZE

// 📁 user.js
export default class User {
  constructor(name) { this.name = name; }
}
 
// 📁 app.js
import User from "./user.js"; // No curly braces!

// 📁 math.js
export default function add(a, b) { return a + b; }
export const PI = 3.14159;
export function multiply(a, b) { return a *

import { formatDate as format } from "./utils.js";
import * as Utils from "./utils.js";
Utils.formatDate(new Date());

npm init -y
 
# Install a package
npm install lodash
npm install react react-dom
 
# Install as dev dependency (for build tools, not production)
npm install --save-dev vite
 
# Install a specific version
npm install lodash@4.17.21
 
# Update all packages
npm update
 
# Remove a package

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A sample project",
  "main": "index.js",
  "type": "module",
  "scripts"

"react": "^18.2.0"
          │││
          ││└── Patch (bug fixes, no breaking changes)
          │└── Minor (new features, no breaking changes)
          └── Major (breaking changes)

<script src="lib1.js"></script>
<script src="lib2.js"></script>
<script src="component1.js"></script>
<script src="component2.js"></script>
<

<script src="bundle.js"></script>
<!-- 1 HTTP request! Optimized! ES modules work! -->

# Create a new Vite project
npm create vite@latest my-app -- --template vanilla
# Or for React: --template react
 
cd my-app
npm install
npm run dev  # Start dev server (usually http://localhost:5173)

my-app/
├── index.html          # Entry HTML file
├── package.json        # Dependencies and scripts
├── vite.config.js      # Vite configuration
├── public/             # Static assets
│   └── favicon.svg
└── src/
    ├── main.js         # Entry JavaScript file
    ├── style.css       # Styles
    ├── counter.js      # Module
    └── utils/
        └── helpers.js  # Another module

import { defineConfig } from 'vite';
 
export default defineConfig({
  root: '.',
  build: {
    outDir: 'dist',
    minify: 'esbuild',
  },
  server: {
    port:

            Browser JS              Node.js
Entry       HTML file               Terminal
Import      import from './x.js'    import from 'fs'
APIs        DOM, fetch, console     fs, http, process
Global      window, document        global, process
Purpose     User interface          Server, CLI, tooling