introduction

next.js 包括了next/babel预设到应用中,这包括了一切需要编译React 应用以及服务端代码的事情 …

但是你可能想要扩展默认的Babel 配置,那么这也是可以的 ..

为了开始,你需要定义一个.babelrc文件或者叫做babel.config.js在应用的顶部,如果一个文件发现,那么它将考虑作为信任的资源,因此它需要定义一些Next.js 同样需要的东西,也就是next/babel预设 ..

这里有一个示例.babelrc文件

  1. {
  2.   "presets": ["next/babel"],
  3.   "plugins": []
  4. }

你能够查看这个文件了解由next/babel包括的预设 … - take a look at this file

为了增加预设/插件(而无需配置它们),你能够这样做

  1. {
  2.   "presets": ["next/babel"],
  3.   "plugins": ["@babel/plugin-proposal-do-expressions"]
  4. }

为了增加使用自定义配置的presets/plugins,在next/babel预设上这样做

  1. {
  2.   "presets": [
  3.     [
  4.       "next/babel",
  5.       {
  6.         "preset-env": {},
  7.         "transform-runtime": {},
  8.         "styled-jsx": {},
  9.         "class-properties": {}
  10.       }
  11.     ]
  12.   ],
  13.   "plugins": []
  14. }

为了了解每一个配置的可用选项,查看它们的文档 …

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

在preset-env上的modules选项应该能够保持为false,否则webpack的代码分割将会关闭 …