javascript
examples
examples.js⚡javascript
// ╔══════════════════════════════════════════════════════════════════════════════╗
// ║ BUNDLERS & BUILD TOOLS ║
// ║ Webpack, Rollup, Vite, esbuild & Modern Tooling ║
// ╚══════════════════════════════════════════════════════════════════════════════╝
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ WHY DO WE NEED BUNDLERS? │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Problems bundlers solve: │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ Without Bundler: │ With Bundler: │ │
│ ├──────────────────────────────────┼──────────────────────────────────────┤ │
│ │ 100+ HTTP requests │ 1-5 optimized bundles │ │
│ │ Large file sizes │ Minified & compressed │ │
│ │ No tree-shaking │ Dead code eliminated │ │
│ │ Browser compatibility issues │ Transpiled for older browsers │ │
│ │ Manual dependency management │ Automatic dependency resolution │ │
│ │ No CSS/image processing │ All assets processed │ │
│ └──────────────────────────────────┴──────────────────────────────────────┘ │
│ │
│ ┌───────────────┐ ┌───────────┐ ┌────────────────────────────────┐ │
│ │ src/ │ │ BUNDLER │ │ dist/ │ │
│ │ ├─ index.js │───►│ Process │───►│ └─ bundle.js (optimized) │ │
│ │ ├─ utils.js │ │ & Bundle │ │ │ │
│ │ └─ style.css │ └───────────┘ └────────────────────────────────┘ │
│ └───────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// ════════════════════════════════════════════════════════════════════════════════
// 1. BUNDLERS COMPARISON
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ POPULAR BUNDLERS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┬───────────────┬───────────────┬─────────────┬──────────────┐ │
│ │ │ Webpack │ Rollup │ Vite │ esbuild │ │
│ ├──────────────┼───────────────┼───────────────┼─────────────┼──────────────┤ │
│ │ Released │ 2012 │ 2015 │ 2020 │ 2020 │ │
│ │ Best For │ Apps │ Libraries │ Dev + Apps │ Speed │ │
│ │ Language │ JavaScript │ JavaScript │ JavaScript │ Go │ │
│ │ Config │ Complex │ Moderate │ Minimal │ Simple │ │
│ │ Dev Server │ Plugin │ Plugin │ Built-in │ Plugin │ │
│ │ HMR │ Yes │ Plugin │ Yes (fast) │ Plugin │ │
│ │ Tree-shake │ Yes │ Excellent │ Yes │ Yes │ │
│ │ Code Split │ Yes │ Yes │ Yes │ Yes │ │
│ │ Speed │ Moderate │ Fast │ Very Fast │ Blazing │ │
│ └──────────────┴───────────────┴───────────────┴─────────────┴──────────────┘ │
│ │
│ Modern Alternatives: │
│ • Parcel - Zero config bundler │
│ • SWC - Rust-based transformer (used by Next.js) │
│ • Turbopack - Rust-based bundler (Vercel) │
│ • Bun - All-in-one JavaScript runtime with bundler │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
console.log('Bundlers & Build Tools Examples');
console.log('================================\n');
// ════════════════════════════════════════════════════════════════════════════════
// 2. WEBPACK CONFIGURATION
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ WEBPACK CONFIGURATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ File: webpack.config.js │
│ │
│ Key concepts: │
│ • Entry: Starting point(s) for bundling │
│ • Output: Where to emit bundles │
│ • Loaders: Transform non-JS files (CSS, images, etc.) │
│ • Plugins: Extend webpack functionality │
│ • Mode: 'development' | 'production' | 'none' │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Example Webpack configuration (as JavaScript object for reference)
const webpackConfig = {
// Entry point(s)
entry: './src/index.js',
// Can have multiple entries
// entry: {
// main: './src/index.js',
// vendor: './src/vendor.js'
// },
// Output configuration
output: {
path: '/dist', // Would use path.resolve(__dirname, 'dist')
filename: '[name].[contenthash].js', // Cache-busting with hash
clean: true, // Clean dist folder before build
},
// Mode: affects optimizations
mode: 'production', // or 'development'
// Module rules (loaders)
module: {
rules: [
// JavaScript/JSX with Babel
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
// CSS
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
// SCSS/SASS
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
// Images
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
// Fonts
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
// Plugins
plugins: [
// HtmlWebpackPlugin - generates HTML
// new HtmlWebpackPlugin({ template: './src/index.html' }),
// MiniCssExtractPlugin - extracts CSS to files
// new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),
// DefinePlugin - define environment variables
// new webpack.DefinePlugin({
// 'process.env.NODE_ENV': JSON.stringify('production')
// })
],
// Resolve configuration
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
alias: {
'@': '/src', // Would use path.resolve(__dirname, 'src')
'@components': '/src/components',
},
},
// Development server
devServer: {
static: './dist',
hot: true, // Hot Module Replacement
port: 3000,
open: true, // Open browser
},
// Optimization
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
minimize: true,
},
// Source maps for debugging
devtool: 'source-map',
};
console.log('1. Webpack Configuration Example:');
console.log(' Entry:', webpackConfig.entry);
console.log(' Output:', webpackConfig.output.filename);
console.log(' Mode:', webpackConfig.mode);
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 3. ROLLUP CONFIGURATION
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ ROLLUP CONFIGURATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ File: rollup.config.js │
│ │
│ Best for: Libraries, packages (excellent tree-shaking) │
│ │
│ Key features: │
│ • Multiple output formats (ESM, CJS, UMD, IIFE) │
│ • Superior tree-shaking │
│ • Smaller bundle sizes for libraries │
│ • Clean, readable output │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Example Rollup configuration
const rollupConfig = {
// Input
input: 'src/index.js',
// Multiple outputs for different environments
output: [
// ES Module format (modern browsers, bundlers)
{
file: 'dist/my-library.esm.js',
format: 'esm',
sourcemap: true,
},
// CommonJS format (Node.js)
{
file: 'dist/my-library.cjs.js',
format: 'cjs',
sourcemap: true,
},
// UMD format (browsers, AMD, CommonJS)
{
file: 'dist/my-library.umd.js',
format: 'umd',
name: 'MyLibrary', // Global variable name
sourcemap: true,
},
// IIFE format (browsers, script tag)
{
file: 'dist/my-library.iife.js',
format: 'iife',
name: 'MyLibrary',
sourcemap: true,
},
],
// External dependencies (don't bundle these)
external: ['react', 'react-dom', 'lodash'],
// Plugins
plugins: [
// @rollup/plugin-node-resolve - resolve node_modules
// resolve(),
// @rollup/plugin-commonjs - convert CommonJS to ES modules
// commonjs(),
// @rollup/plugin-babel - transpile with Babel
// babel({ babelHelpers: 'bundled', exclude: 'node_modules/**' }),
// @rollup/plugin-terser - minify
// terser()
],
};
console.log('2. Rollup Configuration Example:');
console.log(' Input:', rollupConfig.input);
console.log(
' Output formats:',
rollupConfig.output.map((o) => o.format).join(', ')
);
console.log(' External deps:', rollupConfig.external.join(', '));
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 4. VITE CONFIGURATION
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ VITE CONFIGURATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ File: vite.config.js │
│ │
│ Why Vite is fast: │
│ ┌─────────────────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Development: │ │
│ │ • No bundling! Uses native ES modules │ │
│ │ • esbuild for fast transforms │ │
│ │ • On-demand file serving │ │
│ │ • Instant HMR │ │
│ │ │ │
│ │ Production: │ │
│ │ • Rollup for optimized builds │ │
│ │ • Code splitting │ │
│ │ • CSS code splitting │ │
│ │ │ │
│ └─────────────────────────────────────────────────────────────────────────┘ │
│ │
│ Commands: │
│ • npm create vite@latest my-app │
│ • npm run dev (development server) │
│ • npm run build (production build) │
│ • npm run preview (preview production build) │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Example Vite configuration (import { defineConfig } from 'vite')
const viteConfig = {
// Base public path
base: '/',
// Development server
server: {
port: 3000,
open: true,
cors: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
// Build configuration
build: {
outDir: 'dist',
sourcemap: true,
minify: 'esbuild', // or 'terser' for more compression
// Library mode (for building libraries)
// lib: {
// entry: 'src/index.js',
// name: 'MyLib',
// formats: ['es', 'cjs', 'umd']
// },
// Rollup options
rollupOptions: {
// External deps for library mode
external: ['react', 'react-dom'],
output: {
globals: {
react: 'React',
'react-dom': 'ReactDOM',
},
},
},
},
// CSS configuration
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/styles/variables.scss";',
},
},
modules: {
localsConvention: 'camelCase',
},
},
// Resolve (alias)
resolve: {
alias: {
'@': '/src',
'@components': '/src/components',
},
},
// Plugins
plugins: [
// @vitejs/plugin-react - React support
// react(),
// @vitejs/plugin-vue - Vue support
// vue(),
],
// Optimization
optimizeDeps: {
include: ['lodash-es'], // Pre-bundle these
exclude: ['some-package'], // Don't pre-bundle
},
};
console.log('3. Vite Configuration Example:');
console.log(' Server port:', viteConfig.server.port);
console.log(' Output dir:', viteConfig.build.outDir);
console.log(' Minifier:', viteConfig.build.minify);
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 5. ESBUILD CONFIGURATION
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ ESBUILD CONFIGURATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Why esbuild is blazing fast: │
│ • Written in Go (compiled, parallel execution) │
│ • 10-100x faster than other bundlers │
│ • Used by Vite for development transforms │
│ │
│ CLI usage: │
│ esbuild src/index.js --bundle --outfile=dist/bundle.js │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// esbuild API configuration
const esbuildConfig = {
// Entry points
entryPoints: ['src/index.js'],
// Output
outfile: 'dist/bundle.js',
// Or for multiple outputs:
// outdir: 'dist',
// Bundle dependencies
bundle: true,
// Minify
minify: true,
// Source maps
sourcemap: true,
// Target environment
target: ['es2020', 'chrome80', 'firefox78', 'safari13'],
// Format
format: 'esm', // 'iife', 'cjs', 'esm'
// Platform
platform: 'browser', // 'browser', 'node', 'neutral'
// External packages
external: ['react', 'react-dom'],
// Define globals
define: {
'process.env.NODE_ENV': '"production"',
},
// Loaders
loader: {
'.png': 'file',
'.svg': 'text',
'.json': 'json',
},
// Plugins (limited compared to webpack)
plugins: [],
};
console.log('4. esbuild Configuration Example:');
console.log(' Entry:', esbuildConfig.entryPoints);
console.log(' Format:', esbuildConfig.format);
console.log(' Platform:', esbuildConfig.platform);
console.log(' Target:', esbuildConfig.target.join(', '));
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 6. KEY BUNDLER CONCEPTS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ KEY BUNDLER CONCEPTS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. ENTRY POINTS │
│ Starting file(s) for dependency graph │
│ │
│ 2. OUTPUT │
│ Where and how to write bundled files │
│ │
│ 3. LOADERS/TRANSFORMS │
│ Process non-JS files (CSS, images, TypeScript) │
│ │
│ 4. PLUGINS │
│ Extend bundler functionality │
│ │
│ 5. CODE SPLITTING │
│ Split code into smaller chunks for lazy loading │
│ │
│ 6. TREE SHAKING │
│ Remove unused code (dead code elimination) │
│ │
│ 7. HOT MODULE REPLACEMENT (HMR) │
│ Update modules without full page refresh │
│ │
│ 8. SOURCE MAPS │
│ Map bundled code back to original source │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Simulating bundler concepts
// ─── Code Splitting Example ────────────────────────────────────────────────────
console.log('5. Key Bundler Concepts:');
console.log('');
// Dynamic import for code splitting
async function loadFeature(featureName) {
console.log(` Loading feature: ${featureName}`);
// This would create a separate chunk in a real bundler
// const module = await import(`./features/${featureName}.js`);
// Simulated dynamic import
const features = {
dashboard: { render: () => '<Dashboard />' },
settings: { render: () => '<Settings />' },
profile: { render: () => '<Profile />' },
};
return features[featureName];
}
// Route-based code splitting
const routes = {
'/': () => import('./pages/home.js'),
'/about': () => import('./pages/about.js'),
'/dashboard': () => import('./pages/dashboard.js'),
};
console.log(' Code Splitting (dynamic imports):');
console.log(
' Routes configured for lazy loading:',
Object.keys(routes).join(', ')
);
console.log('');
// ─── Tree Shaking Example ──────────────────────────────────────────────────────
// Only `add` will be included if only `add` is imported
const mathUtils = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
multiply: (a, b) => a * b,
divide: (a, b) => a / b,
};
// Tree shaking works best with:
// 1. ES Modules (import/export)
// 2. Pure functions (no side effects)
// 3. Proper sideEffects field in package.json
console.log(' Tree Shaking:');
console.log(' - Works with ES Modules (static analysis)');
console.log(' - Removes unused exports');
console.log(' - sideEffects: false in package.json');
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 7. PACKAGE.JSON SCRIPTS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ PACKAGE.JSON SCRIPTS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Common scripts for different bundlers: │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
const packageJsonScripts = {
// Webpack
webpack: {
dev: 'webpack serve --mode development',
build: 'webpack --mode production',
'build:dev': 'webpack --mode development',
analyze: 'webpack --profile --json > stats.json',
},
// Rollup
rollup: {
dev: 'rollup -c -w',
build: 'rollup -c',
'build:prod': 'NODE_ENV=production rollup -c',
},
// Vite
vite: {
dev: 'vite',
build: 'vite build',
preview: 'vite preview',
'build:lib': 'vite build --mode lib',
},
// esbuild
esbuild: {
dev: 'esbuild src/index.js --bundle --watch --servedir=dist',
build: 'esbuild src/index.js --bundle --minify --outfile=dist/bundle.js',
},
};
console.log('6. Package.json Scripts:');
console.log(
' Webpack:',
JSON.stringify(packageJsonScripts.webpack, null, 2).split('\n').join('\n ')
);
console.log(
' Vite:',
JSON.stringify(packageJsonScripts.vite, null, 2).split('\n').join('\n ')
);
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 8. COMMON PLUGINS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ COMMON PLUGINS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Webpack Plugins: │
│ • HtmlWebpackPlugin - Generate HTML │
│ • MiniCssExtractPlugin - Extract CSS │
│ • CopyWebpackPlugin - Copy static files │
│ • DefinePlugin - Define environment variables │
│ • BundleAnalyzerPlugin - Visualize bundle │
│ │
│ Rollup Plugins: │
│ • @rollup/plugin-node-resolve - Resolve node_modules │
│ • @rollup/plugin-commonjs - Convert CommonJS to ESM │
│ • @rollup/plugin-babel - Babel transpilation │
│ • @rollup/plugin-terser - Minification │
│ • rollup-plugin-visualizer - Bundle visualization │
│ │
│ Vite Plugins: │
│ • @vitejs/plugin-react - React support │
│ • @vitejs/plugin-vue - Vue support │
│ • vite-plugin-pwa - PWA support │
│ • vite-plugin-compression - Gzip/Brotli │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
console.log('7. Common Plugins by Bundler:');
console.log(
' Webpack: HtmlWebpackPlugin, MiniCssExtractPlugin, DefinePlugin'
);
console.log(' Rollup: @rollup/plugin-node-resolve, @rollup/plugin-commonjs');
console.log(
' Vite: @vitejs/plugin-react, @vitejs/plugin-vue, vite-plugin-pwa'
);
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 9. BUILD OPTIMIZATION TECHNIQUES
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ BUILD OPTIMIZATION TECHNIQUES │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ 1. Code Splitting │
│ • Route-based splitting │
│ • Component-based splitting │
│ • Vendor chunk separation │
│ │
│ 2. Minification │
│ • JavaScript: Terser, esbuild │
│ • CSS: cssnano, clean-css │
│ • HTML: html-minifier │
│ │
│ 3. Compression │
│ • Gzip (.gz files) │
│ • Brotli (.br files) │
│ │
│ 4. Caching │
│ • Content hash in filenames │
│ • Long-term caching for static assets │
│ │
│ 5. Asset Optimization │
│ • Image compression │
│ • Font subsetting │
│ • SVG optimization │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Example optimization configuration
const optimizationConfig = {
// Webpack optimization
webpack: {
optimization: {
minimize: true,
minimizer: ['terser-webpack-plugin', 'css-minimizer-webpack-plugin'],
splitChunks: {
chunks: 'all',
maxSize: 244000, // 244kb max chunk size
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
priority: 10,
},
common: {
minChunks: 2,
priority: 5,
reuseExistingChunk: true,
},
},
},
runtimeChunk: 'single',
},
},
// Content hashing for cache busting
output: {
filename: '[name].[contenthash:8].js',
chunkFilename: '[name].[contenthash:8].chunk.js',
assetModuleFilename: 'assets/[name].[contenthash:8][ext]',
},
};
console.log('8. Optimization Techniques:');
console.log(' Chunk splitting:', 'all chunks, vendor separation');
console.log(' Max chunk size:', '244kb');
console.log(' Cache busting:', 'contenthash in filenames');
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 10. ENVIRONMENT CONFIGURATION
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ ENVIRONMENT CONFIGURATION │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Files: │
│ • .env - Default │
│ • .env.local - Local overrides (gitignored) │
│ • .env.development - Development mode │
│ • .env.production - Production mode │
│ │
│ Access: │
│ • Vite: import.meta.env.VITE_API_URL │
│ • Webpack: process.env.REACT_APP_API_URL │
│ │
│ Important: │
│ • Only prefixed variables are exposed to client │
│ • VITE_ prefix for Vite │
│ • REACT_APP_ prefix for Create React App │
│ • NEVER expose secrets to client-side code! │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Environment configuration example
const envConfig = {
development: {
API_URL: 'http://localhost:3000',
DEBUG: true,
LOG_LEVEL: 'debug',
},
production: {
API_URL: 'https://api.production.com',
DEBUG: false,
LOG_LEVEL: 'error',
},
test: {
API_URL: 'http://localhost:3000',
DEBUG: true,
LOG_LEVEL: 'warn',
},
};
// .env file example content
const dotEnvExample = `
# .env.development
VITE_API_URL=http://localhost:3000
VITE_DEBUG=true
# .env.production
VITE_API_URL=https://api.production.com
VITE_DEBUG=false
# Usage in code:
# const apiUrl = import.meta.env.VITE_API_URL
`.trim();
console.log('9. Environment Configuration:');
console.log(' Development API:', envConfig.development.API_URL);
console.log(' Production API:', envConfig.production.API_URL);
console.log(' Prefix: VITE_ (Vite), REACT_APP_ (CRA)');
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// 11. MONOREPO BUILD TOOLS
// ════════════════════════════════════════════════════════════════════════════════
/*
┌─────────────────────────────────────────────────────────────────────────────────┐
│ MONOREPO BUILD TOOLS │
├─────────────────────────────────────────────────────────────────────────────────┤
│ │
│ Popular monorepo tools: │
│ • Turborepo - Fast build system with caching │
│ • Nx - Extensible build framework │
│ • Lerna - Original monorepo tool │
│ • pnpm workspaces - Built into pnpm │
│ │
│ Structure: │
│ ├── packages/ │
│ │ ├── ui/ (shared UI components) │
│ │ ├── utils/ (shared utilities) │
│ │ └── config/ (shared config) │
│ ├── apps/ │
│ │ ├── web/ (web application) │
│ │ └── mobile/ (mobile application) │
│ ├── package.json │
│ └── turbo.json │
│ │
└─────────────────────────────────────────────────────────────────────────────────┘
*/
// Turborepo configuration example
const turboConfig = {
$schema: 'https://turbo.build/schema.json',
pipeline: {
build: {
dependsOn: ['^build'],
outputs: ['dist/**', '.next/**'],
},
test: {
dependsOn: ['build'],
outputs: [],
},
lint: {
outputs: [],
},
dev: {
cache: false,
},
},
};
console.log('10. Monorepo Tools:');
console.log(' Turborepo: Fast builds with caching');
console.log(' Nx: Extensible, great for large teams');
console.log(' Lerna: Original, now maintained by Nx');
console.log('');
// ════════════════════════════════════════════════════════════════════════════════
// SUMMARY
// ════════════════════════════════════════════════════════════════════════════════
console.log(`
╔══════════════════════════════════════════════════════════════════════════════╗
║ BUNDLERS & BUILD TOOLS - COMPLETE ║
╠══════════════════════════════════════════════════════════════════════════════╣
║ ║
║ Bundler Selection Guide: ║
║ ┌────────────────┬───────────────────────────────────────────────────────┐ ║
║ │ Use Case │ Recommended │ ║
║ ├────────────────┼───────────────────────────────────────────────────────┤ ║
║ │ Web App (SPA) │ Vite, Webpack │ ║
║ │ Library │ Rollup, Vite (lib mode) │ ║
║ │ Fast Dev │ Vite, esbuild │ ║
║ │ Complex App │ Webpack (most plugins/loaders) │ ║
║ │ Speed Focus │ esbuild, Vite │ ║
║ │ Zero Config │ Parcel, Vite │ ║
║ └────────────────┴───────────────────────────────────────────────────────┘ ║
║ ║
║ Key Concepts: ║
║ • Entry points → Bundle → Output ║
║ • Loaders transform files (CSS, images, TypeScript) ║
║ • Plugins extend functionality ║
║ • Tree shaking removes unused code ║
║ • Code splitting creates lazy-loaded chunks ║
║ • HMR updates modules without refresh ║
║ ║
║ Modern Trends: ║
║ • Rust/Go based tools (esbuild, SWC, Turbopack) ║
║ • Native ES modules in development (Vite) ║
║ • Zero-config approaches ║
║ • Incremental builds and caching ║
║ ║
╚══════════════════════════════════════════════════════════════════════════════╝
`);