turbo (экспериментальная функция)

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

Полезно знать:

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

Загрузчики (loaders) 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 для изменения разрешения модулей с помощью алиасов, аналогично конфигурации resolve.alias в webpack.

Для настройки алиасов сопоставьте импортируемые шаблоны с их новым назначением в 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. На данный момент поддерживается только условие browser. В приведенном выше примере импорты модуля mocha будут перенаправляться на mocha/browser-entry.js, когда Turbopack работает в браузерных средах.

Расширения для разрешения модулей

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

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

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

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

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