如何为Storybook 6-7版本配置自定义Babel配置（NX+Next.js）

方法1：通过Babel环境变量区分配置 #

在项目根目录的.babelrc中使用env字段，为Storybook和Next.js分别指定预设，不同环境会自动加载对应配置：

{
  "env": {
    "storybook": {
      "presets": ["@nrwl/react/babel"]
    },
    "development": {
      "presets": ["next/babel"]
    },
    "production": {
      "presets": ["next/babel"]
    }
  },
  "plugins": []
}

启动Storybook时指定storybook环境变量：

STORYBOOK=true nx run shop:storybook

也可以在package.json中添加快捷脚本：

{
  "scripts": {
    "storybook:shop": "STORYBOOK=true nx run shop:storybook"
  }
}

方法2：在Storybook配置中直接注入Babel规则 #

修改.storybook/main.js，通过babel选项直接定义配置，无需依赖外部.babelrc文件：

module.exports = {
  // 保留其他原有Storybook配置
  babel: async (defaultOptions) => {
    return {
      ...defaultOptions,
      presets: ["@nrwl/react/babel"],
      plugins: [],
    };
  },
};

这种方式会直接覆盖Storybook默认的Babel配置，完全避开和Next.js根目录配置的冲突。

方法3：使用项目级Babel配置文件替代.babelrc #

创建项目根目录的babel.config.json（项目级配置），通过overrides字段按文件类型区分规则：

{
  "overrides": [
    {
      "test": ["**/*.stories.js", "**/*.stories.tsx"],
      "presets": ["@nrwl/react/babel"]
    },
    {
      "test": ["**/*.js", "**/*.tsx", "!**/*.stories.js", "!**/*.stories.tsx"],
      "presets": ["next/babel"]
    }
  ]
}

之后删除项目根目录的.babelrc，Next.js会自动识别babel.config.json，Storybook处理stories文件时也会匹配到对应的预设。

内容的提问来源于stack exchange，提问作者DevOverflow