turbo (experimentell)

Turbopack kann angepasst werden, um verschiedene Dateien zu transformieren und die Modulauflösung zu ändern.

Wichtig zu wissen:

• Diese Funktionen sind experimentell und funktionieren nur mit next --turbo.
• Turbopack für Next.js benötigt weder Loader noch Loader-Konfiguration für eingebaute Funktionalität. Turbopack bietet eingebaute 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.

webpack-Loader

Falls Sie Loader-Unterstützung über die eingebauten Funktionen hinaus benötigen, funktionieren viele webpack-Loader bereits mit Turbopack. Derzeit gibt es einige Einschränkungen:

• Nur ein Kernsubset der webpack-Loader-API ist implementiert. Derzeit gibt es ausreichende Abdeckung für einige beliebte Loader, und wir werden unsere 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 etwaige Optionen in next.config.js hinzu, indem Sie Dateiendungen einer Liste von Loadern zuordnen:

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

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

Unterstützte Loader

Die folgenden Loader wurden getestet und funktionieren mit Turbopacks webpack-Loader-Implementierung:

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

Auflösungs-Aliase

Über next.config.js kann Turbopack so konfiguriert werden, dass die Modulauflösung durch Aliase modifiziert wird, ähnlich wie webpacks resolve.alias-Konfiguration.

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

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

Dies aliased Importe des underscore-Pakets zum lodash-Paket. Mit anderen Worten, import underscore from 'underscore' wird das lodash-Modul anstelle von underscore laden.

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 zu mocha/browser-entry.js gealiased, wenn Turbopack Browser-Umgebungen als Ziel hat.

Auflösungs-Erweiterungen

Über next.config.js kann Turbopack so konfiguriert werden, dass Module mit benutzerdefinierten Erweiterungen aufgelöst werden, ähnlich wie webpacks resolve.extensions-Konfiguration.

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

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

Dies überschreibt die ursprünglichen Auflösungs-Erweiterungen mit der bereitgestellten Liste. Stellen Sie sicher, die Standard-Erweiterungen einzubeziehen.

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