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

Posted 2023-02-19

【中文标题】如何在生产中为 Docs 插件的 React Storybook 启用 prop-types

【英文标题】：How to enable prop-types in production for a React Storybook for the Docs addon

【发布时间】：2020-08-13 18:25:36

【问题描述】：

默认情况下，prop-types 不会在 React 应用的生产环境中运行。我意识到这是提高性能的一件好事。但是，我们已经构建了一个Storybook，并将其部署到静态站点。 Storybook 有一个名为 Docs 的插件，它检测组件的 prop-types 并创建一个 prop-types 表以便于阅读文档。

在本地运行故事书时，一切正常。检测到 prop-types 并生成此表。

SpinningLoader.propTypes = 
  color: PropTypes.string,
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
;

但是，由于 prop-types 在生产中默认是禁用的。将故事书部署到静态站点时无法检测到它们。

有没有办法在生产中启用道具类型？或者其他一些解决方法？

【问题讨论】：

您是否按照storybook.js.org/docs/basics/exporting-storybook 中的说明进行导出？

也可以看看github.com/storybookjs/storybook/issues/8140

【参考方案1】：

如果有人再次遇到这个问题，将NODE_ENV 设置为development，正如这里建议的https://github.com/storybookjs/storybook/issues/8140#issuecomment-621314565，解决了我们的问题

这个问题最终是由在我们的babel.config.js 生产环境中包含transform-react-remove-prop-types 插件引起的。没有要读取的 propTypes，就没有可显示的内容。

【参考方案2】：

一种解决方法是使用 ArgTypes 手动指定要在表中显示的每个组件的信息：https://storybook.js.org/docs/react/api/argtypes. 然后您可以使用该方法继续文档。

另一种选择是在应用程序仍在开发中时完成并publish the storybook。通过这种方式，您将检测到 prop-types 并为您生成表格，然后您可以稍后构建您的应用程序以用于生产。

这是在第一个选项中声明 argTypes 的方式

// Button.stories.js

export default 
  title: 'Button',
  component: Button,
  argTypes: 
    label: 
      description: 'overwritten description',
      table: 
        type:  
            summary: 'something short', 
            detail: 'something really really long' 
        ,
       defaultValue:  summary: 'default-label' 
      ,
      control: 
        type: 'text',
      ,
    ,
  ,
;

这是结果

【参考方案3】：

如果不查看更多设置，您可能会有点难以了解。如果您使用默认的故事书命令构建它，而没有其他配置，它应该“正常工作”......据我所知。

正如评论中提到的，Storybook has a specific build command 您可以添加到您的package.json 以将其导出为静态应用程序：

"scripts": 
  "build-storybook": "build-storybook -c .storybook -o .out"

如果您正在使用该命令但仍然无法正常工作，您是否使用了任何自定义 webpack/build 工作流程，您也可以发布这些吗？

我已经构建了一个最小存储库以供参考，这可能有助于比较您的设置。除了package.json 中的包之外，它实际上只有 3 个文件； Storybook 配置、一个 React 组件和一个组件故事：

.storybook/main.js

module.exports = 
  stories: ['../src/**/*.stories.[tj]s'],
  addons: ['@storybook/addon-docs'],
;

src/components/message/message.js

import React from 'react'
import PropTypes from 'prop-types'

const Message = function Message( text, color ) 
  return (<div style= color >text</div>)


Message.propTypes = 
  text: PropTypes.string.isRequired,
  color: PropTypes.string.isRequired,


export default Message

src/components/message/message.stories.js

import React from 'react'
import Message from './message'

export default  title: 'Message', component: Message 

export const withText = () => <Message text="Hello World" color="green" />

如果我运行 build-storybook 命令、cd .out，然后运行 ​​npx live-server，我会看到静态构建的故事书网站，其中包含我的 Message 组件，以及包含道具类型的“文档”选项卡：

完整存储库供参考

https://github.com/BenjaminWFox/react-storybook

【讨论】：

我遵循了所有步骤。以前我们的 build-storybook 命令只有 -s public 用于标记。即使在本地（npx live-server），道具表仍然对类型说“未知”，所以我还没有修复它，但这是一个非常好的详细答案。谢谢你。接下来，我在 .storybook 目录中检查我的 webpack 配置。编辑：我应该说纱线故事书命令仍然正确显示类型。只有 npx live-server 的行为就像我在本地运行时报告的问题一样。

@KevinVandy 你能发布你相关的 Storybook 和 Webpack 配置文件吗？如果您正在对转换模块（ES6->CommonJS 等）、polyfill、缩小或任何显着改变生产构建代码结构的任何特定操作进行任何操作，这可能会导致它们无法被文档插件。

【参考方案4】：

'propTypes' 是一个有用的特性，通过它我们可以验证 React 中 props 的类型检查，但它也不必要地产生了运行时开销。它 降低应用性能。

这就是它在生产中不可用的原因。

它旨在帮助开发人员，尤其是团队中的开发人员，在开发环境中编写代码时找出是否有任何错误类型的道具被传递给组件。 它不会添加任何额外的功能。它还会不必要地添加额外的代码行。

将其保留在生产流程中会破坏整个目的。

无论你是否也使用 Flow/typescript 进行类型检查，目的都是一样的。 参考：https://reactjs.org/docs/typechecking-with-proptypes.html

现在，您的问题类似于以下已知问题，请参考以下内容： https://github.com/storybookjs/storybook/issues/1661

【讨论】：

正如我在发布的问题中所述，我了解在正常的反应应用程序中，我们不希望 propTypes 在生产中运行。由于我一直在处理这个问题，我想更好的问题是如何以“开发”模式而不是“生产”模式部署站点，以便 propTypes 可以在本故事书的静态站点上运行。

没问题@KevinVandy，但是，如前所述，您是否通过链接：github.com/storybookjs/storybook/issues/8140，这是一个已知的错误，此问题仍然存在，因为工作仍在进行中。不过，您也可以尝试以下链接：github.com/storybookjs/storybook/issues/8435 和 github.com/storybookjs/storybook/pull/8581，这可能会解决您的问题。否则，您必须等到 Bug 被删除。干杯！