如何在生产环境下为React Storybook的Docs插件启用prop-types

我完全懂你的困扰——本地跑Storybook时能正常解析prop-types生成漂亮的参数表格，结果部署到静态站点就失效了，核心原因就是React生产环境构建会自动移除prop-types相关代码来做性能优化。下面是几个可行的解决方案，按推荐程度排序：

1. 调整Storybook的Babel/Webpack配置，阻止移除Prop-Types #

这是最直接的方案，因为Storybook的生产构建默认会沿用React的生产优化规则，把prop-types代码剔除。我们可以针对性修改Storybook的构建配置，让它保留prop-types：

方法A：修改Babel配置 #

在你的Storybook配置目录（通常是.storybook）下创建或修改.babelrc文件，明确在生产环境中禁用移除prop-types的插件：

{
  "env": {
    "production": {
      "plugins": [
        // 移除或注释掉babel-plugin-transform-react-remove-prop-types
        // 如果之前配置了这个插件，现在不要包含它
      ]
    }
  }
}

如果你用的是@babel/preset-react，可以在预设配置里直接关闭移除prop-types的功能：

{
  "presets": [
    ["@babel/preset-react", {
      "removePropTypes": false
    }]
  ]
}

方法B：修改Webpack配置 #

如果项目用了自定义Webpack配置，在.storybook/main.js里调整规则，确保prop-types代码不会被tree-shaking移除：

module.exports = {
  webpackFinal: async (config) => {
    // 找到处理JS/JSX的规则，修改babel-loader的选项
    const jsRule = config.module.rules.find(rule => rule.test.test('.js'));
    jsRule.use[0].options = {
      ...jsRule.use[0].options,
      presets: [
        ["@babel/preset-react", { removePropTypes: false }]
      ]
    };
    return config;
  }
};

2. 手动导出Prop-Types对象，让Storybook直接读取 #

如果不想折腾构建配置，可以在组件文件里把prop-types单独导出一个变量——即使React生产环境移除了Component.propTypes，这个导出的对象依然存在，Storybook可以直接使用它：

import PropTypes from 'prop-types';

export const SpinningLoader = ({ color, size }) => {
  // 组件逻辑
};

// 原来的prop-types设置
SpinningLoader.propTypes = {
  color: PropTypes.string,
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};

// 额外导出一个单独的prop-types对象
export const SpinningLoaderPropTypes = SpinningLoader.propTypes;

然后在你的Story文件或MDX文档里，手动导入这个对象，告诉Storybook Docs用它生成参数表格：

import { SpinningLoader, SpinningLoaderPropTypes } from './SpinningLoader';

export default {
  title: 'Components/SpinningLoader',
  component: SpinningLoader,
  // 指定用我们导出的prop-types生成文档
  argTypes: SpinningLoaderPropTypes
};

3. 迁移到TypeScript（长期方案） #

如果项目有计划升级技术栈，TypeScript是更优的选择——它不仅能提供编译时类型检查，Storybook Docs还能直接解析TypeScript的接口/类型定义生成文档，完全不需要依赖运行时的prop-types。比如：

interface SpinningLoaderProps {
  color?: string;
  size?: string | number;
}

export const SpinningLoader = ({ color = '#000', size = 'medium' }: SpinningLoaderProps) => {
  // 组件逻辑
};

Storybook Docs会自动识别这个接口并生成参数表格，不受生产环境构建的影响，还能提升代码的可维护性。

4. 临时方案：修改Storybook构建的NODE_ENV（不推荐） #

这个只适合临时验证，不建议长期使用：把Storybook的构建命令改成用development环境变量，这样React不会禁用prop-types。比如在package.json里修改脚本：

{
  "scripts": {
    "build-storybook": "NODE_ENV=development build-storybook"
  }
}

不过这样会关闭Storybook生产构建的一些优化（比如代码压缩、tree-shaking），导致部署后的包体积变大，所以仅做临时测试用。

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