turbo

turbo 选项让你可以自定义 Turbopack 来转换不同的文件并更改模块的解析方式。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}
 
export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}
 
module.exports = nextConfig

值得注意的是：

• Next.js 的 Turbopack 不需要 loader 或 loader 配置来实现内置功能。Turbopack 内置支持 CSS 和编译现代 JavaScript，所以如果你使用 @babel/preset-env，就不需要 css-loader、postcss-loader 或 babel-loader。

参考

选项

turbo 配置支持以下选项：

支持的 loader

以下 loader 已经过测试，可以与 Turbopack 的 webpack loader 实现一起使用：

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

示例

配置 webpack loader

如果你需要超出内置功能的 loader 支持，许多 webpack loader 已经可以与 Turbopack 一起使用。目前有一些限制：

• 仅实现了 webpack loader API 的核心子集。目前已经有足够的覆盖范围支持一些流行的 loader，我们将在未来扩展我们的 API 支持。
• 仅支持返回 JavaScript 代码的 loader。目前不支持转换样式表或图像等文件的 loader。
• 传递给 webpack loader 的选项必须是普通的 JavaScript 原始值、对象和数组。例如，不能将 require() 插件模块作为选项值传递。

要配置 loader，在 next.config.js 中添加你已安装的 loader 名称和任何选项，将文件扩展名映射到 loader 列表：

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

值得注意的是：在 Next.js 13.4.4 版本之前，turbo.rules 名为 turbo.loaders，并且只接受像 .mdx 这样的文件扩展名，而不是 *.mdx。

解析别名

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 的条件导出。目前仅支持 browser 条件。在上面的例子中，当 Turbopack 针对浏览器环境时，mocha 模块的导入将被别名为 mocha/browser-entry.js。

解析自定义扩展名

Turbopack 可以配置为解析带有自定义扩展名的模块，类似于 webpack 的 resolve.extensions 配置。

要配置解析扩展名，在 next.config.js 中使用 resolveExtensions 字段：

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

这会用提供的列表覆盖原始的解析扩展名。请确保包含默认的扩展名。

有关更多信息和如何将你的应用从 webpack 迁移到 Turbopack 的指南，请参阅 Turbopack 关于 webpack 兼容性的文档。

分配模块 ID

Turbopack 目前支持两种分配模块 ID 的策略：

• 'named' 根据模块的路径和功能分配可读的模块 ID。
• 'deterministic' 分配小的哈希数字模块 ID，这些 ID 在构建之间基本保持一致，因此有助于长期缓存。

如果未设置，Turbopack 将在开发构建中使用 'named'，在生产构建中使用 'deterministic'。

要配置模块 ID 策略，在 next.config.js 中使用 moduleIdStrategy 字段：

module.exports = {
  experimental: {
    turbo: {
      moduleIdStrategy: 'deterministic',
    },
  },
}

版本历史