自定义 babel 配置

Examples

为了扩展方便我们使用babel，可以在应用根目录新建.babelrc文件，该文件可配置。

如果有该文件，我们将会考虑数据源，因此也需要定义 next 项目需要的东西，也就是 next/babel预设。

这种设计方案将会使你不诧异于我们可以定制 babel 配置。

下面是.babelrc文件案例：

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

next/babel预设可处理各种 React 应用所需要的情况。包括：

  • preset-env
  • preset-react
  • plugin-proposal-class-properties
  • plugin-proposal-object-rest-spread
  • plugin-transform-runtime
  • styled-jsx
    presets / plugins 不允许添加到.babelrc中，然而你可以配置next/babel预设：
  1. {
  2.   "presets": [
  3.     ["next/babel", {
  4.       "preset-env": {},
  5.       "transform-runtime": {},
  6.       "styled-jsx": {},
  7.       "class-properties": {}
  8.     }]
  9.   ],
  10.   "plugins": []
  11. }

"preset-env"模块选项应该保持为 false，否则 webpack 代码分割将被禁用。