What is included in Ejemplos de Turbopack?

This page includes curated sample entries, related tools, and neighboring sample collections for Ejemplos de Turbopack.

Elysia Tools

Navegación

Build Tools

Ejemplos de Turbopack

Ejemplos del empaquetador Turbopack incluyendo configuración, optimización de rendimiento e integración con frameworks web modernos

Ejemplos

Entradas de esta colección

CódigotypescriptSimple

Configuración Básica de Turbopack

Configuración fundamental de Turbopack y patrones de uso básicos para aplicaciones web

Dificultad

2/10

Tiempo estimado

15 min

Etiquetas

turbopack, nextjs, setup, development

Requisitos previos

Node.js, npm/yarn, Basic React knowledge

typescript

// Turbopack Basic Setup Examples
// Turbopack is an incremental bundler written in Rust for the web

// 1. Next.js with Turbopack
// package.json
{
  "name": "my-turbopack-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "eslint": "^8.0.0",
    "eslint-config-next": "^14.0.0",
    "typescript": "^5.0.0"
  }
}

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // Turbopack configuration
      loaders: {
        '.svg': ['@svgr/webpack'],
      },
    },
  },
  // Enable Turbopack for development
  turbo: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

module.exports = nextConfig

// 2. Basic TypeScript Configuration
// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "ES2020"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"],
      "@/styles/*": ["./src/styles/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

// 3. Basic App Structure
// src/app/layout.tsx
import './globals.css'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Turbopack App',
  description: 'A Next.js app powered by Turbopack',
}

function RootLayoutBasic({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <main className="min-h-screen bg-gray-50">
          <nav className="bg-white shadow-sm border-b">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="flex justify-between h-16">
                <div className="flex items-center">
                  <h1 className="text-xl font-bold">Turbopack App</h1>
                </div>
                <div className="flex items-center space-x-4">
                  <a href="/" className="text-gray-600 hover:text-gray-900">
                    Home
                  </a>
                  <a href="/about" className="text-gray-600 hover:text-gray-900">
                    About
                  </a>
                </div>
              </div>
            </div>
          </nav>
          {children}
        </main>
      </body>
    </html>
  )
}

// src/app/page.tsx
function HomePageBasic() {
  return (
    <div className="py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-gray-900 sm:text-5xl">
            Welcome to Turbopack
          </h1>
          <p className="mt-6 text-xl text-gray-600 max-w-3xl mx-auto">
            Experience lightning-fast builds with Turbopack, the incremental bundler
            built for modern web development.
          </p>
          <div className="mt-10 flex justify-center space-x-4">
            <button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
              Get Started
            </button>
            <button className="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg hover:bg-gray-50">
              Learn More
            </button>
          </div>
        </div>

        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="text-center">
            <div className="text-3xl font-bold text-blue-600">10x</div>
            <div className="mt-2 text-lg text-gray-600">Faster Builds</div>
          </div>
          <div className="text-center">
            <div className="text-3xl font-bold text-green-600">99%</div>
            <div className="mt-2 text-lg text-gray-600">Reliability</div>
          </div>
          <div className="text-center">
            <div className="text-3xl font-bold text-purple-600">5x</div>
            <div className="mt-2 text-lg text-gray-600">Better DX</div>
          </div>
        </div>
      </div>
    </div>
  )
}

// src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS for Turbopack app */
.gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.turbopack-animations {
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 4. Component Examples
// src/components/TurbopackFeatures.tsx
import { useState } from 'react'

interface Feature {
  title: string
  description: string
  icon: string
  benefits: string[]
}

const features: Feature[] = [
  {
    title: 'Incremental Builds',
    description: 'Only rebuild what changed with Turbopack's intelligent dependency tracking',
    icon: '⚡',
    benefits: ['10-100x faster builds', 'Minimal rebuilds', 'Smart caching']
  },
  {
    title: 'Rust Performance',
    description: 'Built with Rust for maximum performance and memory efficiency',
    icon: '🦀',
    benefits: ['Blazing fast', 'Memory efficient', 'Reliable']
  },
  {
    title: 'Modern ESM Support',
    description: 'First-class support for ES modules and modern JavaScript features',
    icon: '📦',
    benefits: ['Tree shaking', 'Code splitting', 'Modern syntax']
  },
  {
    title: 'TypeScript Integration',
    description: 'Deep TypeScript integration with zero-config setup',
    icon: '📘',
    benefits: ['Type checking', 'IntelliSense', 'Error reporting']
  },
  {
    title: 'CSS Modules',
    description: 'Built-in support for CSS modules and CSS-in-JS',
    icon: '🎨',
    benefits: ['Scoped styles', 'CSS-in-JS', 'PostCSS support']
  },
  {
    title: 'Hot Module Replacement',
    description: 'Lightning-fast HMR for instant development feedback',
    icon: '🔄',
    benefits: ['State preservation', 'Instant updates', 'Dev tooling']
  }
]

function TurbopackFeatures() {
  const [selectedFeature, setSelectedFeature] = useState<number | null>(null)

  return (
    <div className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
          Turbopack Features
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => (
            <div
              key={index}
              className={`bg-white rounded-lg shadow-lg p-6 cursor-pointer transition-all duration-300 hover:shadow-xl ${
                selectedFeature === index ? 'ring-2 ring-blue-500' : ''
              }`}
              onClick={() => setSelectedFeature(selectedFeature === index ? null : index)}
            >
              <div className="text-4xl mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold text-gray-900 mb-2">
                {feature.title}
              </h3>
              <p className="text-gray-600 mb-4">{feature.description}</p>

              {selectedFeature === index && (
                <div className="mt-4 pt-4 border-t">
                  <h4 className="font-semibold text-gray-900 mb-2">Benefits:</h4>
                  <ul className="space-y-1">
                    {feature.benefits.map((benefit, idx) => (
                      <li key={idx} className="flex items-center text-sm text-gray-600">
                        <span className="w-1.5 h-1.5 bg-green-500 rounded-full mr-2"></span>
                        {benefit}
                      </li>
                    ))}
                  </ul>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// src/components/PerformanceComparison.tsx
function PerformanceComparison() {
  const benchmarks = [
    { metric: 'Cold Start', webpack: '2.3s', turbopack: '0.4s', improvement: '5.8x' },
    { metric: 'Hot Reload', webpack: '1.8s', turbopack: '0.1s', improvement: '18x' },
    { metric: 'Build Size', webpack: '245KB', turbopack: '210KB', improvement: '14%' },
    { metric: 'Memory Usage', webpack: '512MB', turbopack: '180MB', improvement: '65%' },
  ]

  return (
    <div className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
          Performance Comparison
        </h2>

        <div className="bg-gray-50 rounded-lg p-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {benchmarks.map((benchmark, index) => (
              <div key={index} className="text-center">
                <div className="text-2xl font-bold text-gray-900 mb-2">
                  {benchmark.metric}
                </div>

                <div className="space-y-2 mb-4">
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Webpack:</span>
                    <span className="font-medium">{benchmark.webpack}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">Turbopack:</span>
                    <span className="font-medium text-green-600">{benchmark.turbopack}</span>
                  </div>
                </div>

                <div className="bg-green-100 text-green-800 rounded-lg px-3 py-2">
                  <div className="text-lg font-bold">{benchmark.improvement}</div>
                  <div className="text-xs">faster</div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-8 text-center">
            <p className="text-gray-600">
              Benchmarks based on typical Next.js applications. Results may vary based on
              project complexity and configuration.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

// 5. API Routes with Turbopack
// src/app/api/hello/route.ts
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const searchParams = request.nextUrl.searchParams
  const name = searchParams.get('name') || 'World'

  return NextResponse.json({
    message: `Hello, ${name}!`,
    timestamp: new Date().toISOString(),
    bundler: 'Turbopack'
  })
}

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const { name } = body

    return NextResponse.json({
      message: `Hello, ${name}!`,
      received: body,
      timestamp: new Date().toISOString()
    })
  } catch (error) {
    return NextResponse.json(
      { error: 'Invalid JSON data' },
      { status: 400 }
    )
  }
}

// src/app/api/users/route.ts
import { NextResponse } from 'next/server'

// Mock user data
const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com' },
]

export async function GET() {
  return NextResponse.json({
    users,
    count: users.length,
    bundler: 'Turbopack'
  })
}

export async function POST(request: Request) {
  try {
    const body = await request.json()
    const newUser = {
      id: users.length + 1,
      ...body
    }

    users.push(newUser)

    return NextResponse.json({
      message: 'User created successfully',
      user: newUser
    }, { status: 201 })
  } catch (error) {
    return NextResponse.json(
      { error: 'Failed to create user' },
      { status: 500 }
    )
  }
}

// 6. Development Scripts
// scripts/dev.js
const { execSync } = require('child_process')
const fs = require('fs')
const path = require('path')

// Check if Turbopack is available
function checkTurbopack() {
  try {
    execSync('npx next --version', { stdio: 'pipe' })
    return true
  } catch {
    console.log('❌ Next.js not found. Installing...')
    execSync('npm install next@latest react@latest react-dom@latest', { stdio: 'inherit' })
    return true
  }
}

// Start development server with Turbopack
function startDevServer() {
  console.log('🚀 Starting development server with Turbopack...')
  console.log('📦 This will use Turbopack for lightning-fast builds!')
  console.log('🌐 Visit http://localhost:3000 to see your app')

  try {
    execSync('npm run dev', { stdio: 'inherit' })
  } catch (error) {
    console.error('❌ Failed to start development server:', error.message)
    process.exit(1)
  }
}

// Main execution
if (require.main === module) {
  if (checkTurbopack()) {
    startDevServer()
  }
}

// 7. Environment Configuration
// .env.local
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3000/api
TURBOPACK=1
NODE_ENV=development

// .env.production.local
NEXT_PUBLIC_APP_URL=https://your-app-domain.com
NEXT_PUBLIC_API_URL=https://your-api-domain.com/api
NODE_ENV=production

const exportedTurbopackFeatures = TurbopackFeatures

CódigotypescriptIntermedio

Configuración Avanzada de Turbopack

Configuración avanzada de Turbopack incluyendo loaders personalizados, plugins, optimización de rendimiento y personalización de builds

Dificultad

7/10

Tiempo estimado

45 min

Etiquetas

turbopack, advanced, configuration, optimization

Requisitos previos

Turbopack basics, Next.js, TypeScript, Build tools

typescript

// Turbopack Advanced Configuration
// Advanced patterns and customization for Turbopack

// 1. Advanced Next.js Configuration with Turbopack
// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // Enable Turbopack
      turbo: {
        // Custom loaders configuration
        loaders: {
          '.svg': [
            {
              loader: '@svgr/webpack',
              options: {
                icon: true,
                svgo: true,
                svgoConfig: {
                  plugins: [
                    {
                      name: 'preset-default',
                      params: {
                        overrides: {
                          removeViewBox: false,
                        },
                      },
                    },
                  ],
                },
              },
            },
          ],
          '.glsl': ['raw-loader'],
          '.wgsl': ['raw-loader'],
          '.mdx': ['@next/mdx'],
        },

        // Resolve aliases
        resolveAlias: {
          '@': './src',
          '@/components': './src/components',
          '@/lib': './src/lib',
          '@/styles': './src/styles',
          '@/assets': './src/assets',
          '@/types': './src/types',
        },

        // External packages to skip transpilation
        externals: ['sharp', 'canvas'],

        // Custom transformations
        transform: {
          '^.+\\.(js|jsx|ts|tsx)$': ['swc-loader'],
        },

        // Source map configuration
        sourceMap: {
          production: true,
          development: true,
        },

        // Minification
        minify: process.env.NODE_ENV === 'production',

        // Tree shaking
        treeshake: true,

        // Code splitting
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            default: false,
            vendors: false,
            framework: {
              name: 'framework',
              chunks: 'all',
              test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|scheduler|prop-types|use-subscription)[\\/]/,
              priority: 40,
              enforce: true,
            },
            lib: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                const packageName = module.context
                  ? module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)?.[1]
                  : null
                return `npm.${packageName}`
              },
              priority: 30,
              minChunks: 1,
              reuseExistingChunk: true,
            },
          },
        },
      },
    },

    // Experimental features
    appDir: true,
    serverComponentsExternalPackages: ['@prisma/client'],

    // Output configuration
    output: 'standalone',

    // Compression
    compress: true,

    // Powered-by header removal
    poweredByHeader: false,

    // React strict mode
    reactStrictMode: true,

    // SWC minification
    swcMinify: true,

    // Image optimization
    images: {
      domains: ['example.com', 'cdn.example.com'],
      formats: ['image/webp', 'image/avif'],
      deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
      imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    },

    // Rewrites for API routes
    async rewrites() {
      return [
        {
          source: '/api/external/:path*',
          destination: 'https://external-api.com/:path*',
        },
      ]
    },

    // Redirects
    async redirects() {
      return [
        {
          source: '/home',
          destination: '/',
          permanent: true,
        },
      ]
    },

    // Headers
    async headers() {
      return [
        {
          source: '/api/:path*',
          headers: [
            { key: 'Access-Control-Allow-Credentials', value: 'true' },
            { key: 'Access-Control-Allow-Origin', value: '*' },
            { key: 'Access-Control-Allow-Methods', value: 'GET,OPTIONS,PATCH,DELETE,POST,PUT' },
          ],
        },
      ]
    },
  },

  // Webpack configuration fallback (for when Turbopack is not used)
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Custom webpack rules
    config.module.rules.push({
      test: /\\.glsl$/,
      use: 'raw-loader',
    })

    // Performance optimizations
    if (!dev && !isServer) {
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true,
          },
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            priority: -10,
            chunks: 'all',
          },
        },
      }
    }

    return config
  },
}

module.exports = nextConfig

// 2. Custom Turbopack Loader
// loaders/custom-loader.ts
import type { LoaderContext } from '@next/swc'

function customLoader(
  this: LoaderContext,
  source: string
): string {
  const { resourcePath, options } = this

  // Custom transformation logic
  if (resourcePath.endsWith('.custom')) {
    // Process custom file format
    const processed = source
      .replace(/\/\* CUSTOM_START \*\//g, '')
      .replace(/\/\* CUSTOM_END \*\//g, '')
      .trim()

    return `export default ${JSON.stringify(processed)};`
  }

  // TypeScript file processing
  if (resourcePath.endsWith('.ts') || resourcePath.endsWith('.tsx')) {
    // Add custom TypeScript transformations
    return source
      .replace(/console\.log/g, '// console.log') // Remove console.logs
      .replace(/debugger;/g, '// debugger;') // Remove debuggers
  }

  return source
}

// 3. Turbopack Plugin System
// plugins/turbopack-plugin.ts
import type { Plugin } from '@next/swc'

interface PluginOptions {
  enabled?: boolean
  analyze?: boolean
}

export function turbopackPlugin(options: PluginOptions = {}): Plugin {
  const { enabled = true, analyze = false } = options

  return {
    name: 'custom-turbopack-plugin',
    apply(compiler) {
      if (!enabled) return

      compiler.hooks.beforeCompile.tap('CustomPlugin', (params) => {
        console.log('🔧 Turbopack compilation starting...')
      })

      compiler.hooks.afterCompile.tap('CustomPlugin', (stats) => {
        console.log('✅ Turbopack compilation completed!')

        if (analyze) {
          console.log('📊 Build stats:', {
            time: stats.endTime - stats.startTime,
            assets: stats.assets?.length || 0,
            chunks: stats.chunks?.length || 0
          })
        }
      })

      // Custom optimization hooks
      compiler.hooks.optimize.tap('CustomPlugin', (compilation) => {
        // Add custom optimizations
        compilation.modules.forEach(module => {
          // Module-specific optimizations
        })
      })
    },
  }
}

// 4. Environment-specific Configuration
// config/turbo.config.development.ts
import type { TurboConfig } from 'turbo'

const devConfig: TurboConfig = {
  pipeline: {
    build: {
      dependsOn: ['^build'],
      cache: false,
    },
    dev: {
      cache: false,
      persistent: true,
    },
    lint: {
      outputs: [],
    },
    test: {
      dependsOn: ['build'],
      cache: false,
    },
  },
  env: {
    NEXT_PUBLIC_DEV_MODE: 'true',
    TURBOPACK_DEV: 'true',
  },
}

const exportedDevConfig = devConfig

// config/turbo.config.production.ts
import type { TurboConfig } from 'turbo'

const prodConfig: TurboConfig = {
  pipeline: {
    build: {
      dependsOn: ['^build', 'lint', 'test'],
      cache: true,
    },
    lint: {
      outputs: [],
    },
    test: {
      dependsOn: ['build'],
      cache: true,
    },
    deploy: {
      dependsOn: ['build'],
      cache: false,
    },
  },
  env: {
    NEXT_PUBLIC_DEV_MODE: 'false',
    TURBOPACK_PROD: 'true',
  },
}

const exportedProdConfig = prodConfig

// 5. Performance Monitoring
// utils/performance-monitor.ts
interface BuildMetrics {
  startTime: number
  endTime?: number
  duration?: number
  fileSize?: number
  chunks?: number
  assets?: string[]
}

class TurbopackPerformanceMonitor {
  private metrics: Map<string, BuildMetrics> = new Map()

  startBuild(buildName: string) {
    this.metrics.set(buildName, {
      startTime: Date.now(),
    })
  }

  endBuild(buildName: string, additionalMetrics?: Partial<BuildMetrics>) {
    const metric = this.metrics.get(buildName)
    if (metric) {
      metric.endTime = Date.now()
      metric.duration = metric.endTime - metric.startTime

      if (additionalMetrics) {
        Object.assign(metric, additionalMetrics)
      }

      console.log(`📈 Build Performance (${buildName}):`, {
        duration: `${metric.duration}ms`,
        fileSize: metric.fileSize ? `${(metric.fileSize / 1024 / 1024).toFixed(2)}MB` : 'N/A',
        chunks: metric.chunks || 'N/A'
      })
    }
  }

  getReport(): string {
    const report = ['📊 Turbopack Performance Report\n']

    for (const [name, metric] of this.metrics) {
      report.push(`🔹 ${name}:`)
      if (metric.duration) {
        report.push(`   Duration: ${metric.duration}ms`)
      }
      if (metric.fileSize) {
        report.push(`   Size: ${(metric.fileSize / 1024 / 1024).toFixed(2)}MB`)
      }
      report.push('')
    }

    return report.join('\n')
  }
}

export const performanceMonitor = new TurbopackPerformanceMonitor()

// 6. Build Optimization Scripts
// scripts/optimize-build.js
const { execSync } = require('child_process')
const fs = require('fs')
const path = require('path')

class BuildOptimizer {
  constructor() {
    this.projectRoot = process.cwd()
    this.nextConfigPath = path.join(this.projectRoot, 'next.config.js')
    this.packageJsonPath = path.join(this.projectRoot, 'package.json')
  }

  async optimizeForProduction() {
    console.log('🚀 Optimizing build for production...')

    // 1. Analyze bundle size
    await this.analyzeBundleSize()

    // 2. Optimize dependencies
    await this.optimizeDependencies()

    // 3. Configure Turbopack for production
    await this.configureTurbopackProduction()

    // 4. Run production build
    await this.runProductionBuild()
  }

  async analyzeBundleSize() {
    console.log('📦 Analyzing bundle size...')

    try {
      const result = execSync('npm run build -- --analyze', {
        encoding: 'utf8',
        stdio: 'pipe'
      })

      console.log('Bundle analysis completed.')
    } catch (error) {
      console.warn('Bundle analysis failed, continuing...')
    }
  }

  async optimizeDependencies() {
    console.log('🔧 Optimizing dependencies...')

    // Remove unused dependencies
    const packageJson = JSON.parse(fs.readFileSync(this.packageJsonPath, 'utf8'))

    // Add production-specific optimizations
    if (!packageJson.browser) {
      packageJson.browser = {
        "fs": false,
        "path": false,
        "os": false
      }
    }

    fs.writeFileSync(this.packageJsonPath, JSON.stringify(packageJson, null, 2))
    console.log('✅ Dependencies optimized')
  }

  async configureTurbopackProduction() {
    console.log('⚙️ Configuring Turbopack for production...')

    const configContent = `
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      loaders: {
        '.svg': ['@svgr/webpack'],
      },
      resolveAlias: {
        '@': './src',
      },
      minify: true,
      treeshake: true,
      sourceMap: false,
    },
  },
  swcMinify: true,
  compress: true,
  poweredByHeader: false,
  output: 'standalone',
}

module.exports = nextConfig
    `

    fs.writeFileSync(this.nextConfigPath, configContent)
    console.log('✅ Turbopack configured for production')
  }

  async runProductionBuild() {
    console.log('🏗️ Running production build...')

    try {
      execSync('npm run build', { stdio: 'inherit' })
      console.log('✅ Production build completed successfully!')
    } catch (error) {
      console.error('❌ Production build failed:', error.message)
      process.exit(1)
    }
  }
}

// CLI execution
if (require.main === module) {
  const optimizer = new BuildOptimizer()
  optimizer.optimizeForProduction().catch(console.error)
}

// 7. Custom Turbopack Presets
// presets/react-library-preset.ts
import type { TurboConfig } from 'turbo'

export function reactLibraryPreset(): TurboConfig {
  return {
    pipeline: {
      build: {
        dependsOn: ['^build'],
        outputs: ['dist/**'],
      },
      dev: {
        cache: false,
        persistent: true,
      },
      test: {
        dependsOn: ['build'],
        cache: true,
      },
      lint: {
        outputs: [],
      },
      typecheck: {
        dependsOn: ['build'],
        cache: true,
      },
    },
    globalEnv: {
      NODE_ENV: 'development',
      TURBOPACK: '1',
    },
    env: {
      NEXT_PUBLIC_APP_NAME: 'React Library',
    },
  }
}

// presets/monorepo-preset.ts
export function monorepoPreset(): TurboConfig {
  return {
    pipeline: {
      build: {
        dependsOn: ['^build'],
        outputs: ['dist/**', '.next/**'],
      },
      dev: {
        cache: false,
        persistent: true,
      },
      lint: {
        outputs: [],
      },
      test: {
        dependsOn: ['build'],
        cache: true,
      },
      clean: {
        cache: false,
      },
    },
    globalDependencies: ['**/.env.*local'],
    globalEnv: {
      NODE_ENV: 'development',
      TURBOPACK: '1',
    },
  }
}

// 8. Development Utilities
// utils/turbo-dev-utils.ts
export class TurboDevUtils {
  static async reloadConfig() {
    // Clear require cache for config files
    Object.keys(require.cache).forEach(key => {
      if (key.includes('next.config') || key.includes('turbo.config')) {
        delete require.cache[key]
      }
    })

    console.log('🔄 Configuration reloaded')
  }

  static async invalidateCache(pattern: string) {
    // Invalidate Turbopack cache for specific patterns
    console.log(`🗑️ Invalidating cache for pattern: ${pattern}`)
  }

  static measureBuildPerformance() {
    const startTime = performance.now()

    return {
      end: () => {
        const endTime = performance.now()
        const duration = endTime - startTime

        return {
          duration,
          formatted: `${duration.toFixed(2)}ms`,
          performanceLevel: duration < 1000 ? 'excellent' :
                           duration < 3000 ? 'good' : 'needs-improvement'
        }
      }
    }
  }

  static getBuildStats() {
    return {
      memoryUsage: process.memoryUsage(),
      platform: process.platform,
      nodeVersion: process.version,
      turbopackVersion: '1.0.0', // Get from package.json
    }
  }
}

// Usage examples
export function startOptimizedDevServer() {
  const perf = TurboDevUtils.measureBuildPerformance()

  console.log('🚀 Starting optimized dev server...')
  console.log('📊 Current system stats:', TurboDevUtils.getBuildStats())

  // Simulate dev server start
  setTimeout(() => {
    const stats = perf.end()
    console.log(`⚡ Dev server ready! (${stats.formatted})`)
    console.log(`🎯 Performance: ${stats.performanceLevel}`)
  }, 100)
}

const exportedBuildOptimizer = BuildOptimizer

CódigotypescriptComplejo

Guía de Migración de Turbopack

Guía completa de migración de Webpack/Vite a Turbopack incluyendo proceso paso a paso y mejores prácticas

Dificultad

9/10

Tiempo estimado

90 min

Etiquetas

turbopack, migration, automation, advanced

Requisitos previos

Advanced build tools knowledge, JavaScript/TypeScript, CLI usage

typescript

// Turbopack Migration Guide
// Complete guide for migrating from Webpack/Vite to Turbopack

// 1. Migration Assessment Script
// scripts/assess-migration.ts
import * as fs from 'fs'
import * as path from 'path'
import { execSync } from 'child_process'

interface ProjectAssessment {
  projectName: string
  packageManager: 'npm' | 'yarn' | 'pnpm'
  buildTool: 'webpack' | 'vite' | 'rollup' | 'other'
  framework: 'nextjs' | 'react' | 'vue' | 'angular' | 'other'
  complexity: 'simple' | 'medium' | 'complex'
  migrationComplexity: 'easy' | 'moderate' | 'challenging'
  compatibility: Array<{
    feature: string
    status: 'supported' | 'partial' | 'unsupported'
    notes: string
  }>
  recommendations: string[]
}

class MigrationAssessor {
  private projectPath: string

  constructor(projectPath: string = process.cwd()) {
    this.projectPath = projectPath
  }

  assessProject(): ProjectAssessment {
    const packageJson = this.readPackageJson()
    const assessment: ProjectAssessment = {
      projectName: packageJson.name || 'unknown',
      packageManager: this.detectPackageManager(),
      buildTool: this.detectBuildTool(packageJson),
      framework: this.detectFramework(packageJson),
      complexity: this.assessComplexity(),
      migrationComplexity: 'moderate',
      compatibility: [],
      recommendations: []
    }

    this.assessCompatibility(assessment)
    this.generateRecommendations(assessment)

    return assessment
  }

  private readPackageJson(): any {
    try {
      const packageJsonPath = path.join(this.projectPath, 'package.json')
      return JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
    } catch {
      return {}
    }
  }

  private detectPackageManager(): 'npm' | 'yarn' | 'pnpm' {
    if (fs.existsSync(path.join(this.projectPath, 'pnpm-lock.yaml'))) return 'pnpm'
    if (fs.existsSync(path.join(this.projectPath, 'yarn.lock'))) return 'yarn'
    return 'npm'
  }

  private detectBuildTool(packageJson: any): 'webpack' | 'vite' | 'rollup' | 'other' {
    const deps = { ...packageJson.dependencies, ...packageJson.devDependencies }

    if (deps.vite) return 'vite'
    if (deps.webpack || deps['webpack-cli'] || deps['webpack-dev-server']) return 'webpack'
    if (deps.rollup) return 'rollup'

    return 'other'
  }

  private detectFramework(packageJson: any): 'nextjs' | 'react' | 'vue' | 'angular' | 'other' {
    const deps = { ...packageJson.dependencies, ...packageJson.devDependencies }

    if (deps.next) return 'nextjs'
    if (deps.react && deps['react-dom']) return 'react'
    if (deps.vue) return 'vue'
    if (deps['@angular/core']) return 'angular'

    return 'other'
  }

  private assessComplexity(): 'simple' | 'medium' | 'complex' {
    let score = 0

    // Check for custom configuration files
    if (fs.existsSync(path.join(this.projectPath, 'webpack.config.js'))) score += 2
    if (fs.existsSync(path.join(this.projectPath, 'vite.config.ts'))) score += 1
    if (fs.existsSync(path.join(this.projectPath, 'postcss.config.js'))) score += 1
    if (fs.existsSync(path.join(this.projectPath, 'tailwind.config.js'))) score += 1

    // Check for number of dependencies
    const packageJson = this.readPackageJson()
    const depCount = Object.keys({
      ...packageJson.dependencies,
      ...packageJson.devDependencies
    }).length

    if (depCount > 50) score += 2
    else if (depCount > 20) score += 1

    if (score <= 2) return 'simple'
    if (score <= 4) return 'medium'
    return 'complex'
  }

  private assessCompatibility(assessment: ProjectAssessment) {
    const features = [
      { feature: 'TypeScript Support', supported: true },
      { feature: 'ES Modules', supported: true },
      { feature: 'CSS Modules', supported: true },
      { feature: 'PostCSS', supported: true },
      { feature: 'Tailwind CSS', supported: true },
      { feature: 'Static Assets', supported: true },
      { feature: 'Code Splitting', supported: true },
      { feature: 'Tree Shaking', supported: true },
    ]

    if (assessment.framework === 'nextjs') {
      features.push(
        { feature: 'App Router', supported: true },
        { feature: 'Server Components', supported: true },
        { feature: 'API Routes', supported: true },
        { feature: 'Image Optimization', supported: true },
        { feature: 'Font Optimization', supported: true }
      )
    }

    assessment.compatibility = features.map(feature => ({
      ...feature,
      status: feature.supported ? 'supported' : 'partial',
      notes: feature.supported ? 'Fully supported by Turbopack' : 'May require configuration'
    }))

    // Check for potentially incompatible features
    const potentiallyIncompatible = [
      'Custom Webpack Loaders',
      'Complex Babel Configurations',
      'Specific Webchain Plugins',
      'Legacy Module Systems'
    ]

    potentiallyIncompatible.forEach(feature => {
      assessment.compatibility.push({
        feature,
        status: 'partial',
        notes: 'May require custom loader or configuration'
      })
    })
  }

  private generateRecommendations(assessment: ProjectAssessment) {
    const recommendations: string[] = []

    if (assessment.framework === 'nextjs') {
      recommendations.push('✅ Excellent choice! Turbopack is designed for Next.js')
      recommendations.push('🚀 Simply add --turbo flag to your dev script')
    } else {
      recommendations.push('⚠️ Consider migrating to Next.js for best Turbopack experience')
    }

    if (assessment.complexity === 'simple') {
      recommendations.push('🎯 Your project complexity is ideal for easy migration')
    } else if (assessment.complexity === 'complex') {
      recommendations.push('🔧 Consider simplifying configuration before migration')
      recommendations.push('📋 Document current webpack/vite configuration')
    }

    recommendations.push('📦 Update to latest package versions')
    recommendations.push('🧪 Test thoroughly after migration')
    recommendations.push('👥 Consider gradual migration for large projects')

    assessment.recommendations = recommendations
  }

  generateReport(): string {
    const assessment = this.assessProject()

    let report = `📊 Migration Assessment Report for ${assessment.projectName}
\n🔧 Build Tool: ${assessment.buildTool}
🎨 Framework: ${assessment.framework}
📦 Package Manager: ${assessment.packageManager}
🎯 Project Complexity: ${assessment.complexity}
🚀 Migration Complexity: ${assessment.migrationComplexity}

📋 Feature Compatibility:
\n`

    assessment.compatibility.forEach(comp => {
      const icon = comp.status === 'supported' ? '✅' : comp.status === 'partial' ? '⚠️' : '❌'
      report += `${icon} ${comp.feature}: ${comp.notes}\n`
    })

    report += `
\n💡 Recommendations:
\n`
    assessment.recommendations.forEach(rec => {
      report += `${rec}\n`
    })

    return report
  }
}

// CLI execution
if (require.main === module) {
  const assessor = new MigrationAssessor()
  console.log(assessor.generateReport())
}

export { MigrationAssessor, ProjectAssessment }

// 2. Webpack to Turbopack Migration Script
// scripts/migrate-webpack-to-turbopack.ts
import * as fs from 'fs'
import * as path from 'path'

interface WebpackConfig {
  entry?: any
  output?: any
  module?: {
    rules?: any[]
  }
  resolve?: {
    alias?: Record<string, string>
    extensions?: string[]
  }
  plugins?: any[]
  optimization?: any
}

class WebpackToTurbopackMigrator {
  private projectPath: string
  private webpackConfig: WebpackConfig

  constructor(projectPath: string = process.cwd()) {
    this.projectPath = projectPath
    this.webpackConfig = this.loadWebpackConfig()
  }

  private loadWebpackConfig(): WebpackConfig {
    const configPath = path.join(this.projectPath, 'webpack.config.js')

    if (!fs.existsSync(configPath)) {
      throw new Error('webpack.config.js not found')
    }

    // Clear require cache to ensure fresh load
    delete require.cache[require.resolve(configPath)]

    try {
      const config = require(configPath)
      return typeof config === 'function' ? config() : config
    } catch (error) {
      console.warn('Failed to load webpack config:', error.message)
      return {}
    }
  }

  migrate(): void {
    console.log('🔄 Starting migration from Webpack to Turbopack...')

    // 1. Create Next.js project structure if it doesn't exist
    this.createNextJsStructure()

    // 2. Migrate entry points
    this.migrateEntryPoints()

    // 3. Migrate loaders
    this.migrateLoaders()

    // 4. Migrate resolve configuration
    this.migrateResolveConfig()

    // 5. Migrate plugins
    this.migratePlugins()

    // 6. Create Turbopack configuration
    this.createTurbopackConfig()

    // 7. Update package.json scripts
    this.updatePackageJson()

    // 8. Create migration report
    this.createMigrationReport()

    console.log('✅ Migration completed successfully!')
  }

  private createNextJsStructure() {
    const appDir = path.join(this.projectPath, 'src', 'app')

    if (!fs.existsSync(appDir)) {
      fs.mkdirSync(appDir, { recursive: true })

      // Create basic app structure
      fs.writeFileSync(
        path.join(appDir, 'layout.tsx'),
        this.generateDefaultLayout()
      )

      fs.writeFileSync(
        path.join(appDir, 'page.tsx'),
        this.generateDefaultPage()
      )
    }
  }

  private migrateEntryPoints() {
    if (this.webpackConfig.entry) {
      console.log('📝 Migrating entry points...')
      // Entry points are handled differently in Next.js
      // Convert to pages or app router structure
    }
  }

  private migrateLoaders() {
    if (!this.webpackConfig.module?.rules) return

    console.log('📦 Migrating loaders...')

    const loaders: string[] = []

    this.webpackConfig.module.rules.forEach(rule => {
      // Handle different loader types
      if (rule.test?.test(/\\.svg$/)) {
        loaders.push("'.svg': ['@svgr/webpack']")
      }

      if (rule.test?.test(/\\.(css|scss|sass)$/)) {
        // CSS is handled automatically by Turbopack
      }

      if (rule.test?.test(/\\.(ts|tsx|js|jsx)$/)) {
        // TypeScript/JavaScript is handled automatically
      }
    })

    this.turbopackLoaders = loaders
  }

  private migrateResolveConfig() {
    if (!this.webpackConfig.resolve) return

    console.log('🔍 Migrating resolve configuration...')

    if (this.webpackConfig.resolve.alias) {
      this.turbopackAliases = this.webpackConfig.resolve.alias
    }

    if (this.webpackConfig.resolve.extensions) {
      // Extensions are handled automatically by Turbopack
    }
  }

  private migratePlugins() {
    if (!this.webpackConfig.plugins) return

    console.log('🔌 Migrating plugins...')

    this.webpackConfig.plugins.forEach(plugin => {
      // Handle specific plugins
      if (plugin.constructor.name === 'HtmlWebpackPlugin') {
        // Handled automatically by Next.js
      }

      if (plugin.constructor.name === 'MiniCssExtractPlugin') {
        // CSS extraction handled automatically
      }
    })
  }

  private turbopackLoaders: string[] = []
  private turbopackAliases: Record<string, string> = {}

  private createTurbopackConfig() {
    const configContent = `/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      loaders: {
        ${this.turbopackLoaders.join(',\n        ')}
      },
      resolveAlias: {
        ${Object.entries(this.turbopackAliases)
          .map(([key, value]) => `'${key}': '${value}'`)
          .join(',\n        ')}
      },
    },
  },
}

module.exports = nextConfig`

    const configPath = path.join(this.projectPath, 'next.config.js')
    fs.writeFileSync(configPath, configContent)

    console.log('⚙️ Created next.config.js with Turbopack configuration')
  }

  private updatePackageJson() {
    const packageJsonPath = path.join(this.projectPath, 'package.json')
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))

    // Update dependencies for Next.js
    if (!packageJson.dependencies?.next) {
      packageJson.dependencies = {
        ...packageJson.dependencies,
        next: '^14.0.0',
        react: '^18.0.0',
        'react-dom': '^18.0.0'
      }
    }

    // Update dev dependencies
    packageJson.devDependencies = {
      ...packageJson.devDependencies,
      '@types/node': '^20.0.0',
      '@types/react': '^18.0.0',
      '@types/react-dom': '^18.0.0',
      typescript: '^5.0.0'
    }

    // Update scripts
    packageJson.scripts = {
      ...packageJson.scripts,
      dev: 'next dev --turbo',
      build: 'next build',
      start: 'next start',
      lint: 'next lint'
    }

    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))

    console.log('📦 Updated package.json with Next.js scripts and dependencies')
  }

  private createMigrationReport() {
    const report = {
      migrationDate: new Date().toISOString(),
      originalConfig: this.webpackConfig,
      migratedFeatures: {
        loaders: this.turbopackLoaders.length,
        aliases: Object.keys(this.turbopackAliases).length,
      },
      nextSteps: [
        'Install new dependencies: npm install',
        'Test the development server: npm run dev',
        'Check all pages and components work correctly',
        'Update any custom webpack loaders not supported by Turbopack',
        'Test build process: npm run build'
      ],
      knownIssues: this.identifyKnownIssues()
    }

    fs.writeFileSync(
      path.join(this.projectPath, 'migration-report.json'),
      JSON.stringify(report, null, 2)
    )

    console.log('📋 Created migration-report.json')
  }

  private identifyKnownIssues(): string[] {
    const issues: string[] = []

    // Check for potentially problematic configurations
    if (this.webpackConfig.plugins?.some(p => p.constructor.name === 'DefinePlugin')) {
      issues.push('Webpack DefinePlugin needs to be converted to Next.js environment variables')
    }

    if (this.webpackConfig.optimization) {
      issues.push('Custom webpack optimization may need manual migration')
    }

    return issues
  }

  private generateDefaultLayout(): string {
    return `import './globals.css'

export const metadata = {
  title: 'Migrated App',
  description: 'Migrated from Webpack to Turbopack',
}

function RootLayoutFromWebpackMigration({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
      </body>
    </html>
  )
}`
  }

  private generateDefaultPage(): string {
    return `function HomePage() {
  return (
    <div>
      <h1>Welcome to Your Turbopack App!</h1>
      <p>Successfully migrated from Webpack to Turbopack</p>
    </div>
  )
}`
  }
}

// 3. Vite to Turbopack Migration
// scripts/migrate-vite-to-turbopack.ts
class ViteToTurbopackMigrator {
  private projectPath: string
  private viteConfig: any

  constructor(projectPath: string = process.cwd()) {
    this.projectPath = projectPath
    this.viteConfig = this.loadViteConfig()
  }

  private loadViteConfig(): any {
    const configPath = path.join(this.projectPath, 'vite.config.ts')

    if (!fs.existsSync(configPath)) {
      console.warn('vite.config.ts not found, assuming default configuration')
      return {}
    }

    try {
      // In a real implementation, you'd need to properly load the Vite config
      return {}
    } catch (error) {
      console.warn('Failed to load Vite config:', error.message)
      return {}
    }
  }

  migrate(): void {
    console.log('🔄 Starting migration from Vite to Turbopack...')

    this.convertToNextJs()
    this.migratePlugins()
    this.updateConfiguration()
    this.updatePackageJson()

    console.log('✅ Vite to Turbopack migration completed!')
  }

  private convertToNextJs() {
    console.log('🔄 Converting to Next.js structure...')

    // Create app directory structure
    const appDir = path.join(this.projectPath, 'src', 'app')
    fs.mkdirSync(appDir, { recursive: true })

    // Convert index.html to layout.tsx and page.tsx
    this.convertIndexHtml()

    // Convert src/main.tsx to app components
    this.convertMainTs()
  }

  private convertIndexHtml() {
    const indexPath = path.join(this.projectPath, 'index.html')

    if (fs.existsSync(indexPath)) {
      const indexContent = fs.readFileSync(indexPath, 'utf8')
      const title = indexContent.match(/<title>(.*?)<\/title>/)?.[1] || 'App'

      // Create layout.tsx
      const layoutContent = `import './globals.css'

export const metadata = {
  title: '${title}',
  description: 'Migrated from Vite to Turbopack',
}

function RootLayoutFromViteMigration({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <div id="root">{children}</div>
      </body>
    </html>
  )
}`

      fs.writeFileSync(
        path.join(this.projectPath, 'src', 'app', 'layout.tsx'),
        layoutContent
      )

      console.log('📄 Converted index.html to Next.js layout')
    }
  }

  private convertMainTs() {
    const mainPath = path.join(this.projectPath, 'src', 'main.tsx')

    if (fs.existsSync(mainPath)) {
      const mainContent = fs.readFileSync(mainPath, 'utf8')

      // Create page.tsx from main.tsx content
      const pageContent = `'use client'

${mainContent.replace(/import React from 'react'/, '')}
function HomePageFromViteMigration() {
  return <App />
}`

      fs.writeFileSync(
        path.join(this.projectPath, 'src', 'app', 'page.tsx'),
        pageContent
      )

      console.log('📄 Converted main.tsx to Next.js page')
    }
  }

  private migratePlugins() {
    // Vite plugins need to be converted to Next.js configuration
    if (this.viteConfig.plugins) {
      console.log('🔌 Analyzing Vite plugins for migration...')

      // Handle common plugins
      const pluginMap: Record<string, string> = {
        '@vitejs/plugin-react': 'Built-in to Next.js',
        'vite-plugin-svgr': '@svgr/webpack in Turbopack',
        'tailwindcss': 'Built-in to Next.js',
        'postcss': 'Built-in to Next.js'
      }

      this.viteConfig.plugins.forEach((plugin: any) => {
        const pluginName = typeof plugin === 'string' ? plugin : plugin.name
        if (pluginMap[pluginName]) {
          console.log(`  ✅ ${pluginName}: ${pluginMap[pluginName]}`)
        } else {
          console.log(`  ⚠️  ${pluginName}: May require custom configuration`)
        }
      })
    }
  }

  private updateConfiguration() {
    console.log('⚙️ Creating Next.js configuration...')

    const nextConfig = {
      experimental: {
        turbo: {
          // Vite-specific settings would go here
        }
      }
    }

    const configContent = `/** @type {import('next').NextConfig} */
const nextConfig = ${JSON.stringify(nextConfig, null, 2)}

module.exports = nextConfig`

    fs.writeFileSync(
      path.join(this.projectPath, 'next.config.js'),
      configContent
    )
  }

  private updatePackageJson() {
    console.log('📦 Updating package.json...')

    const packageJsonPath = path.join(this.projectPath, 'package.json')
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))

    // Update dependencies
    packageJson.dependencies = {
      ...packageJson.dependencies,
      next: '^14.0.0',
      'react': '^18.0.0',
      'react-dom': '^18.0.0'
    }

    // Remove Vite-specific dependencies
    delete packageJson.devDependencies?.vite
    delete packageJson.devDependencies?.['@vitejs/plugin-react']

    // Update scripts
    packageJson.scripts = {
      dev: 'next dev --turbo',
      build: 'next build',
      start: 'next start',
      preview: 'next build && next start',
      lint: 'next lint'
    }

    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
  }
}

// 4. Migration Verification Script
// scripts/verify-migration.ts
class MigrationVerifier {
  private projectPath: string

  constructor(projectPath: string = process.cwd()) {
    this.projectPath = projectPath
  }

  async verify(): Promise<boolean> {
    console.log('🔍 Verifying migration...')

    const checks = [
      this.checkDependencies(),
      this.checkConfiguration(),
      this.checkProjectStructure(),
      this.checkDevelopmentServer(),
      this.checkBuildProcess()
    ]

    const results = await Promise.allSettled(checks)
    const failures = results.filter(r => r.status === 'rejected')

    if (failures.length === 0) {
      console.log('✅ All verification checks passed!')
      return true
    } else {
      console.log(`❌ ${failures.length} verification checks failed:`)
      failures.forEach((failure, index) => {
        console.log(`  ${index + 1}. ${failure.reason}`)
      })
      return false
    }
  }

  private async checkDependencies(): Promise<void> {
    const requiredPackages = ['next', 'react', 'react-dom']
    const packageJsonPath = path.join(this.projectPath, 'package.json')
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))

    const missing = requiredPackages.filter(pkg => !packageJson.dependencies?.[pkg])

    if (missing.length > 0) {
      throw new Error(`Missing required packages: ${missing.join(', ')}`)
    }
  }

  private async checkConfiguration(): Promise<void> {
    const configPath = path.join(this.projectPath, 'next.config.js')

    if (!fs.existsSync(configPath)) {
      throw new Error('next.config.js not found')
    }
  }

  private async checkProjectStructure(): Promise<void> {
    const requiredPaths = [
      'src/app/layout.tsx',
      'src/app/page.tsx'
    ]

    const missing = requiredPaths.filter(p => !fs.existsSync(path.join(this.projectPath, p)))

    if (missing.length > 0) {
      throw new Error(`Missing required files: ${missing.join(', ')}`)
    }
  }

  private async checkDevelopmentServer(): Promise<void> {
    // This would typically try to start the dev server
    // For now, just check if the script exists
    const packageJsonPath = path.join(this.projectPath, 'package.json')
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))

    if (!packageJson.scripts?.dev?.includes('--turbo')) {
      throw new Error('Development script not configured for Turbopack')
    }
  }

  private async checkBuildProcess(): Promise<void> {
    const packageJsonPath = path.join(this.projectPath, 'package.json')
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))

    if (!packageJson.scripts?.build) {
      throw new Error('Build script not found')
    }
  }
}

// 5. Usage Examples
// CLI execution
if (require.main === module) {
  const args = process.argv.slice(2)
  const command = args[0]

  switch (command) {
    case 'assess':
      const assessor = new MigrationAssessor()
      console.log(assessor.generateReport())
      break

    case 'webpack':
      const webpackMigrator = new WebpackToTurbopackMigrator()
      webpackMigrator.migrate()
      break

    case 'vite':
      const viteMigrator = new ViteToTurbopackMigrator()
      viteMigrator.migrate()
      break

    case 'verify':
      const verifier = new MigrationVerifier()
      verifier.verify().then(success => {
        process.exit(success ? 0 : 1)
      })
      break

    default:
      console.log(`
Usage: npm run migrate [command]

Commands:
  assess     - Assess project migration readiness
  webpack    - Migrate from Webpack to Turbopack
  vite       - Migrate from Vite to Turbopack
  verify     - Verify migration was successful
      `)
  }
}

export {
  MigrationAssessor,
  WebpackToTurbopackMigrator,
  ViteToTurbopackMigrator,
  MigrationVerifier
}

Herramientas

Herramientas que suelen usarse con este ejemplo

Relacionado

Ejemplos de Turbopack

Entradas de esta colección

Configuración Básica de Turbopack

Configuración Avanzada de Turbopack

Guía de Migración de Turbopack

Herramientas que suelen usarse con este ejemplo

Colecciones de ejemplos relacionadas

Contexto para entender esta colección de ejemplos

Resumen

Cuándo usarlo

Cómo funciona

Casos de uso

Preguntas frecuentes

Convertidor ICO a WebP

Conversión de Imágenes en Lote

Recorte de Imágenes en Lote

Redimensionador de Imágenes

Convertir JPEG a WebP

Detector de Contenido de Imagen NSFW

Compresión de Imágenes en Lote

Conversión de Imágenes en Lote

Ejemplos de Configuración Webpack

Ejemplos de SWC Rust Compiler

Ejemplos WebP

Muestras Avanzadas de Grafana

Ejemplos de Rome Toolchain JavaScript

Ejemplos de Procesamiento de Imágenes Web Python