如何在生产中为React Storybook for the Docs addon启用道具类型？

Question

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

当在本地运行storybook时，一切都很完美。检测到了道具类型，并且生成了这个表格。

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

然而，由于在生产过程中道具类型默认是被禁用的，所以当故事书运行时，它们无法被检测到。当故事书被部署到静态站点时，它们无法被检测到。

有什么方法可以在生产中启用道具类型？或者其他变通方法？

Answer 1

在没有看到你更多的设置的情况下，这有点难以知道。如果你使用默认的storybook命令来构建它，而没有额外的配置，它就会 应 "只是工作"...据我所知。

正如评论中提到的。故事书有一个特定的构建命令 您可以添加到您的 package.json 来导出为一个静态应用。

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

如果你用了那个命令还是不行的话 你是否使用了任何自定义的webpackbuild工作流程 你能把这些也贴出来吗?

我建了一个最小的资源库供参考，可能对你的设置比较有帮助。除了在 package.json 它实际上只有3个文件：Storybook配置，一个React组件和一个Component Story。

.storybookmain.js

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

srccomponentsmessagemessage.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

srccomponentsmessagemessage.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.comBenjaminWFoxreact-storybook。

Answer 2

'propTypes'是一个有用的功能，通过它我们可以在React中验证道具的类型检查，但它也不必要地造成了运行时的开销。它降低了应用程序的性能。

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

它是为了帮助开发人员，特别是团队中的开发人员，在开发环境中编写代码时，发现是否有任何错误的道具类型被传递给组件。它也会不必要的增加额外的代码行。

如果在生产流程中保留它，就会失去整个目的。

无论你是否也使用Flowtypescript来进行tyechecking，目的都是一样的。https:/reactjs.orgdocstypechecking-with-proptypes.html。

现在，你的问题与下面已知的问题类似，请参考下面。https:/github.comstorybookjsstorybookissues1661