turbo (expérimental)

Avertissement : Ces fonctionnalités sont expérimentales et ne fonctionneront qu'avec next --turbo.

Chargeurs (loaders) webpack

Actuellement, Turbopack prend en charge un sous-ensemble de l'API des chargeurs (loaders) de webpack, vous permettant d'utiliser certains chargeurs webpack pour transformer du code dans Turbopack.

Pour configurer les chargeurs, ajoutez les noms des chargeurs que vous avez installés ainsi que leurs options dans next.config.js, en associant les extensions de fichiers à une liste de chargeurs :

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

Ensuite, avec la configuration ci-dessus, vous pouvez utiliser le code transformé depuis votre application :

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

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

Alias de résolution

Via next.config.js, Turbopack peut être configuré pour modifier la résolution des modules à travers des alias, similaire à la configuration resolve.alias de webpack.

Pour configurer les alias de résolution, associez les motifs d'importation à leur nouvelle destination dans next.config.js :

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

Cela crée un alias pour les imports du package underscore vers le package lodash. Autrement dit, import underscore from 'underscore' chargera le module lodash au lieu de underscore.

Turbopack prend également en charge les alias conditionnels via ce champ, similairement aux exports conditionnels de Node.js. Pour le moment, seule la condition browser est prise en charge. Dans l'exemple ci-dessus, les imports du module mocha seront aliasés vers mocha/browser-entry.js lorsque Turbopack cible des environnements navigateur.

Pour plus d'informations et des conseils sur la migration de votre application de webpack vers Turbopack, consultez la documentation de Turbopack sur la compatibilité avec webpack.