Bundlers & Frameworks¶

Why Bundlers Matter¶

TypeScript itself does not bundle code.

It only:

• type‑checks
• transpiles .ts → .js
• preserves module boundaries

Bundlers handle:

• dependency graph resolution
• code splitting
• minification
• asset handling (CSS, images, etc.)
• dev server + HMR

Modern TS projects almost always use a bundler—especially in frontend development.

TypeScript with Vite¶

Vite is the modern default for frontend TypeScript development.

It’s fast, simple, and uses esbuild for TS transpilation.

Why Vite is great for TypeScript¶

• zero config
• instant startup
• HMR out of the box
• uses esbuild for TS → JS (very fast)
• still uses tsc --noEmit for type checking

1. Create a Vite + TypeScript project¶

npm create vite@latest my-app -- --template vanilla-ts

This generates:

vite.config.ts
tsconfig.json
src/main.ts

Everything works out of the box.

2. How Vite handles TypeScript¶

• Vite does not use tsc to transpile
• Vite does not type‑check during dev
• Vite uses esbuild to strip types and transform TS → JS
• You run tsc --noEmit separately for type checking

Recommended workflow¶

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "typecheck": "tsc --noEmit"
  }
}

This gives you:

• blazing‑fast dev
• correct type checking in CI

3. Vite + React + TypeScript¶

npm create vite@latest my-app -- --template react-ts

Everything is preconfigured:

• JSX support
• TSX support
• React Fast Refresh
• TypeScript path aliases

Vite is the easiest way to start a modern TS frontend.

TypeScript with Webpack¶

Webpack is older and more configurable than Vite.

It’s still widely used in enterprise environments.

Why Webpack?¶

• extremely flexible
• supports complex build pipelines
• integrates with legacy systems
• supports loaders for everything

But it requires more configuration.

1. Install Webpack + TS loader¶

npm install --save-dev webpack webpack-cli ts-loader typescript

2. Create a Webpack config¶

webpack.config.js¶

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  },
  output: {
    filename: "bundle.js"
  }
}

3. Configure TypeScript¶

tsconfig.json¶

{
  "compilerOptions": {
    "target": "ES2017",
    "module": "ESNext",
    "strict": true
  }
}

4. Build¶

npx webpack

Webpack will:

• run ts-loader
• call the TypeScript compiler
• bundle everything into a single file

Pros¶

• full type checking
• extremely customizable
• works with legacy code

Cons¶

• slower than Vite
• more configuration required

TypeScript with Node ESM¶

Node.js now supports ES modules natively.

This changes how TypeScript must be configured.

1. Enable ESM in Node¶

In package.json:

{
  "type": "module"
}

Now Node expects:

• .js files to be ESM
• explicit file extensions in imports
• no implicit .js resolution

2. Configure TypeScript for ESM¶

tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "target": "ES2020",
    "outDir": "dist"
  }
}

NodeNext is crucial—it makes TS behave like Node’s ESM loader.

3. Write ESM‑compatible imports¶

import { add } from "./utils.js"

Even in TypeScript, you must include .js because the compiled output will be .js.

4. Run with Node¶

node dist/index.js

Or use a runtime tool like tsx:

npx tsx src/index.ts

Common Pitfalls with Node ESM¶

1. Missing file extensions¶

import { foo } from "./foo" // ❌ fails in Node ESM

Must be:

import { foo } from "./foo.js"

2. Mixing CommonJS and ESM¶

Avoid:

import fs from "fs" // ❌ if using require() elsewhere

3. Incorrect moduleResolution¶

Use:

"moduleResolution": "NodeNext"

Not:

"moduleResolution": "Node"

Choosing the Right Tool¶

Summary¶

In this lesson, you learned how TypeScript integrates with modern build tools:

1. TypeScript with Vite¶

• fastest dev experience
• esbuild for transpilation
• separate type checking

2. TypeScript with Webpack¶

• highly configurable
• supports complex pipelines
• slower but enterprise‑friendly

3. TypeScript with Node ESM¶

• requires explicit .js extensions
• uses moduleResolution: NodeNext
• works great with tsx

Understanding these tools is essential for building real‑world TypeScript applications—frontend or backend.