Next.js高级特性：自定义Babel配置

Next.js将next/babel预置包含在您的应用程序中，其中包括编译React应用程序和服务器端代码所需的所有内容。但是，如果您想扩展默认的Babel配置，也可以。

首先，您只需要.babelrc在应用程序顶部定义一个文件。如果找到了这样的文件，它将被视为真相的来源，因此它还需要定义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": []
}

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

Next.js使用当前的Node.js版本进行服务器端编译。

该modules期权"preset-env"应该保持false，否则的WebPack代码分裂被关闭。