turbo

Die Option turbopack ermöglicht es Ihnen, Turbopack anzupassen, um verschiedene Dateien zu transformieren und die Modulauflösung zu ändern.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  turbopack: {
    // ...
  },
}

export default nextConfig

Gut zu wissen:

• Turbopack für Next.js benötigt keine Loader oder Loader-Konfiguration für eingebaute Funktionen. Turbopack bietet native Unterstützung für CSS und das Kompilieren von modernem JavaScript, daher sind css-loader, postcss-loader oder babel-loader nicht erforderlich, wenn Sie @babel/preset-env verwenden.

Referenz

Optionen

Die folgenden Optionen sind für die turbo-Konfiguration verfügbar:

Unterstützte Loader

Die folgenden Loader wurden getestet und funktionieren mit Turbopacks Webpack-Loader-Implementierung, aber viele andere Webpack-Loader sollten ebenfalls funktionieren, auch wenn sie hier nicht aufgeführt sind:

• babel-loader
• @svgr/webpack
• svg-inline-loader
• yaml-loader
• string-replace-loader
• raw-loader
• sass-loader
• graphql-tag/loader

Beispiele

Stammverzeichnis

Turbopack verwendet das Stammverzeichnis, um Module aufzulösen. Dateien außerhalb des Projektstammverzeichnisses werden nicht aufgelöst.

Next.js erkennt automatisch das Stammverzeichnis Ihres Projekts. Dazu sucht es nach einer der folgenden Dateien:

• pnpm-lock.yaml
• package-lock.json
• yarn.lock
• bun.lock
• bun.lockb

Wenn Sie eine andere Projektstruktur haben, z.B. wenn Sie keine Workspaces verwenden, können Sie die root-Option manuell festlegen:

const path = require('path')
module.exports = {
  turbopack: {
    root: path.join(__dirname, '..'),
  },
}

Konfigurieren von Webpack-Loadern

Wenn Sie Loader-Unterstützung benötigen, die über die eingebauten Funktionen hinausgeht, funktionieren viele Webpack-Loader bereits mit Turbopack. Es gibt derzeit einige Einschränkungen:

• Nur eine Kernauswahl der Webpack-Loader-API ist implementiert. Derzeit reicht die Abdeckung für einige beliebte Loader aus, und wir werden die API-Unterstützung in Zukunft erweitern.
• Es werden nur Loader unterstützt, die JavaScript-Code zurückgeben. Loader, die Dateien wie Stylesheets oder Bilder transformieren, werden derzeit nicht unterstützt.
• An Webpack-Loader übergebene Optionen müssen einfache JavaScript-Primitive, Objekte oder Arrays sein. Es ist beispielsweise nicht möglich, require()-Plugin-Module als Optionswerte zu übergeben.

Um Loader zu konfigurieren, fügen Sie die Namen der installierten Loader und alle Optionen in next.config.js hinzu, indem Sie Dateiendungen einer Liste von Loadern zuordnen.

Hier ist ein Beispiel mit dem @svgr/webpack-Loader, der das Importieren von .svg-Dateien und deren Darstellung als React-Komponenten ermöglicht.

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },
}

Für Loader, die Konfigurationsoptionen erfordern, können Sie anstelle eines Strings ein Objektformat verwenden:

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: [
          {
            loader: '@svgr/webpack',
            options: {
              icon: true,
            },
          },
        ],
        as: '*.js',
      },
    },
  },
}

Gut zu wissen: Vor Next.js Version 13.4.4 hieß turbo.rules turbo.loaders und akzeptierte nur Dateiendungen wie .mdx statt *.mdx.

Auflösen von Aliasen

Turbopack kann so konfiguriert werden, dass es die Modulauflösung durch Aliase ändert, ähnlich wie Webpacks resolve.alias-Konfiguration.

Um Auflösungsaliase zu konfigurieren, ordnen Sie importierte Muster ihrem neuen Ziel in next.config.js zu:

module.exports = {
  turbopack: {
    resolveAlias: {
      underscore: 'lodash',
      mocha: { browser: 'mocha/browser-entry.js' },
    },
  },
}

Dies ersetzt Importe des underscore-Pakets durch das lodash-Paket. Mit anderen Worten: import underscore from 'underscore' lädt das lodash-Modul anstelle von underscore.

Turbopack unterstützt auch bedingtes Aliasing über dieses Feld, ähnlich wie Node.js' Conditional Exports. Derzeit wird nur die browser-Bedingung unterstützt. Im obigen Fall werden Importe des mocha-Moduls in mocha/browser-entry.js umgeleitet, wenn Turbopack auf Browser-Umgebungen abzielt.

Auflösen benutzerdefinierter Endungen

Turbopack kann so konfiguriert werden, dass es Module mit benutzerdefinierten Endungen auflöst, ähnlich wie Webpacks resolve.extensions-Konfiguration.

Um Auflösungsendungen zu konfigurieren, verwenden Sie das Feld resolveExtensions in next.config.js:

module.exports = {
  turbopack: {
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
  },
}

Dies überschreibt die ursprünglichen Auflösungsendungen mit der bereitgestellten Liste. Stellen Sie sicher, dass die Standardendungen enthalten sind.

Weitere Informationen und Anleitungen zur Migration Ihrer Anwendung von Webpack zu Turbopack finden Sie in der Turbopack-Dokumentation zur Webpack-Kompatibilität.

Versionsverlauf