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 代码分割。