JavaScript Advanced Day 6: Modules & Tooling

Goal of this Day

Today you will learn:

• How to organize code professionally using ES6 modules
• Basic usage of bundlers like Webpack or Vite
• Linting & code formatting with Prettier
• Tree-shaking to remove unused code

By the end, you will structure projects like a professional developer.

Step 1: ES6 Modules

Export functions, objects, or variables from one file and import in another:

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

Step 2: Bundlers Basics

Use Webpack or Vite to bundle multiple JS files into one:

• Install bundler (npm install vite or npm install webpack)
• Define entry file
• Run npm run build to produce bundle

Step 3: Linting & Prettier

Ensure code quality:

• Linting: eslint to find potential problems
• Prettier: automatically format code consistently

Step 4: Tree-shaking

Remove unused imports automatically during bundling:

import { add, subtract } from './math.js';
// only 'add' is used
console.log(add(2,3));

Practice

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from './math.js';
console.log(add(2, 3));

Task

Complete the following:

• Split a small project into modules
• Import/export functions correctly

Example:

// utils.js
export function greet(name) {
  return `Hello ${name}`;
}

// main.js
import { greet } from './utils.js';
console.log(greet("Alex")); // Hello Alex