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

Question

默认情况下，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 在生产中默认是禁用的。将故事书部署到静态站点时无法检测到它们。

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

Answer 1

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

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

Answer 2

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

2. 另一种选择是在应用程序仍在开发中时完成并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',
      },
    },
  },
};

这是结果

Answer 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

Answer 4

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

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

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

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

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

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