turbo (Экспериментальный)

Turbopack можно настроить для преобразования различных файлов и изменения способа разрешения модулей.

Важно знать:

• Эти функции экспериментальные и будут работать только с next --turbo.
• Turbopack для Next.js не требует загрузчиков и конфигурации загрузчиков для встроенных функций. Turbopack имеет встроенную поддержку css и компиляции современного JavaScript, поэтому нет необходимости в css-loader, postcss-loader, или babel-loader, если вы используете @babel/preset-env.

Загрузчики webpack

Если вам нужна поддержка загрузчиков, которая выходит за рамки встроенных, многие загрузчики webpack уже работают с Turbopack. В настоящее время существуют некоторые ограничения:

• Реализована только основная часть API загрузчиков webpack. В настоящее время есть достаточный охват для некоторых популярных загрузчиков, и мы расширим поддержку нашего API в будущем.
• Поддерживаются только загрузчики, возвращающие JavaScript-код. Загрузчики, преобразующие файлы, такие как таблицы стилей или изображения, в настоящее время не поддерживаются.
• Параметры, передаваемые загрузчикам webpack, должны быть простыми JavaScript-примитивами, объектами и массивами. Например, невозможно передавать require() модули плагинов в качестве значений параметров.

Для настройки загрузчиков добавьте имена установленных загрузчиков и любые параметры в next.config.js, сопоставляя расширения файлов со списком загрузчиков:

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

Важно знать: До версии Next.js 13.4.4, experimental.turbo.rules назывался experimental.turbo.loaders и принимал только расширения файлов, такие как .mdx, а не *.mdx.

Поддерживаемые загрузчики

Следующие загрузчики были протестированы для работы с реализацией загрузчиков webpack в Turbopack:

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

Псевдонимы

С помощью next.config.js, Turbopack можно настроить для изменения разрешения модулей с помощью псевдонимов, аналогично конфигурации webpack resolve.alias.

Для настройки псевдонимов сопоставьте импортированные шаблоны с их новым местоположением в next.config.js:

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

Это создаёт псевдоним импортов пакета underscore на пакет lodash. Другими словами, import underscore from 'underscore' будет загружать модуль lodash вместо underscore.

Turbopack также поддерживает условное создание псевдонимов через это поле, подобно условным экспортам Node.js's условным экспортам. В настоящий момент поддерживается только условие browser. В приведенном выше случае импорты модуля mocha будут преобразованы в псевдоним mocha/browser-entry.js при использовании Turbopack в браузерных средах.

Расширения

С помощью next.config.js, Turbopack можно настроить для разрешения модулей с пользовательскими расширениями, аналогично конфигурации webpack resolve.extensions.

Для настройки расширений используйте поле resolveExtensions в next.config.js:

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

Это перезаписывает исходные расширения разрешения указанным списком. Убедитесь, что вы включили стандартные расширения.

Для получения дополнительной информации и рекомендаций по миграции вашего приложения в Turbopack из webpack, см. документацию Turbopack по совместимости с webpack.