如何在 Next.js 中配置 Babel

示例

• 自定义 babel 配置

Next.js 为你的应用程序包含 next/babel 预设，其中包含编译 React 应用程序和服务器端代码所需的一切。但如果你想扩展默认的 Babel 配置，这也是可能的。

添加预设和插件

首先，你只需要在项目的根目录中定义一个 .babelrc 文件（或 babel.config.js）。如果找到这样的文件，它将被视为 真相来源，因此需要定义 Next.js 也需要的内容，即 next/babel 预设。

这是一个 .babelrc 文件示例：

.babelrc

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

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

要添加预设/插件而不配置它们，你可以这样做：

.babelrc

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

自定义预设和插件

要添加具有自定义配置的预设/插件，请在 next/babel 预设上这样做：

.babelrc

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

要了解每个配置的可用选项的更多信息，请访问 babel 的文档网站。

提示：

• Next.js 使用当前 Node.js 版本进行服务器端编译。
• "preset-env" 上的 modules 选项应保持为 false，否则 webpack 代码分割将被关闭。