turbo (experimentell)

Warnung: Diese Funktionen sind experimentell und funktionieren nur mit next --turbo.

webpack-Loader

Aktuell unterstützt Turbopack eine Teilmenge der webpack-Loader-API, wodurch Sie einige webpack-Loader verwenden können, um Code in Turbopack zu transformieren.

Um Loader zu konfigurieren, fügen Sie die Namen der installierten Loader und etwaige Optionen in next.config.js hinzu, wobei Sie Dateierweiterungen einer Liste von Loadern zuordnen:

module.exports = {
  experimental: {
    turbo: {
      rules: {
        // Optionsformat
        '*.md': [
          {
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        // Optionsloses Format
        '*.mdx': ['@mdx-js/loader'],
      },
    },
  },
}

Mit der obigen Konfiguration können Sie transformierten Code aus Ihrer App verwenden:

import MyDoc from './my-doc.mdx'

export default function Home() {
  return <MyDoc />
}

Resolve-Alias

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

Um Resolve-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 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 bedingte Aliase über dieses Feld, ähnlich wie Conditional Exports in Node.js. Derzeit wird nur die browser-Bedingung unterstützt. Im obigen Fall werden Importe des mocha-Moduls auf mocha/browser-entry.js umgeleitet, wenn Turbopack auf Browser-Umgebungen abzielt.

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