如何在 Next.js 中配置 Babel

Next.js 已为你的应用内置了 next/babel 预设，其中包含了编译 React 应用和服务端代码所需的所有配置。但如果你想扩展默认的 Babel 配置，也是可行的。

添加预设和插件

首先，只需在项目根目录下创建 .babelrc 文件（或 babel.config.js）。如果检测到该文件，它将被视为 唯一配置源，因此需要手动声明 Next.js 所需的 next/babel 预设。

以下是 .babelrc 文件示例：

{
  "presets": ["next/babel"],
  "plugins": []
}

你可以查看此文件了解 next/babel 包含的预设。

若需添加 无需配置 的预设/插件，可以这样操作：

{
  "presets": ["next/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}

自定义预设和插件

若需添加 带自定义配置 的预设/插件，请按如下方式在 next/babel 预设中配置：

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

要了解每个配置的可用选项，请访问 babel 官方文档。

须知:

• Next.js 使用 当前 Node.js 版本 进行服务端编译
• "preset-env" 中的 modules 选项应保持为 false，否则会禁用 webpack 的代码分割功能