Deploy

Bundling transforms modern TypeScript code into optimized JavaScript for production. You and I can use tools like webpack or Vite to bundle our applications, manage dependencies, and create distributable assets. Think of bundling as the process of packaging our code for the browser, removing unnecessary code and optimizing performance.

ESM and CommonJS modules provide different ways to structure our code imports and exports. You and I can choose the right module system based on our target environment - ESM for modern browsers and Node.js, CommonJS for older Node.js versions. This flexibility ensures our TypeScript applications work wherever we need them.

When you and I properly bundle our TypeScript code, we create performant applications ready for production. We reduce file sizes, manage dependencies efficiently, and ensure our code works consistently across different environments. The result is a smooth developer experience and lightning-fast user experience.

Bundling and Distribution Example

You and I can use webpack to bundle TypeScript modules into a single optimized file for distribution. This example shows how to configure webpack to handle TypeScript compilation and produce browser-ready JavaScript with proper module exports.

// webpack.config.js
module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    library: 'MyLib',
    libraryTarget: 'umd'
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

// src/index.ts
export function greet(name: string): string {
  return `Hello, ${name}!`;
}

export class Counter {
  private count: number = 0;
  
  increment(): void {
    this.count++;
  }
  
  getCount(): number {
    return this.count;
  }
}

// Using in browser
const { greet, Counter } = require('./dist/bundle.js');
const counter = new Counter();
counter.increment();
console.log(greet('World'), counter.getCount());