turbo (实验性)

Turbopack 可以定制以转换不同的文件并改变模块的解析方式。

值得注意的是:

• 这些功能是实验性的，只有在使用 next --turbo 时才能工作。
• 对于内置功能，Turbopack 不需要加载器或加载器配置。Turbopack 内置支持 CSS 和编译现代 JavaScript，因此如果你使用 @babel/preset-env，则不需要 css-loader、postcss-loader 或 babel-loader。

webpack 加载器

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

• 仅实现了 webpack 加载器 API 的核心子集。目前，对于一些流行的加载器有足够的覆盖率，我们将在未来扩展我们的 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。

支持的加载器

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

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

解析扩展

通过 next.config.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 兼容性的文档。