Babel
示例
Next.js 在你的应用中包含了 next/babel
预设,它包含了编译 React 应用和服务器端代码所需的一切。但是,如果你想扩展默认的 Babel 配置,这也是可以的。
添加 Presets 和 Plugins
要开始,你只需要在项目的根目录中定义一个 .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"]
}
自定义 Presets 和 Plugins
要添加带有自定义配置的预设/插件,请在 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 代码拆分将被关闭。
这有帮助吗?