如何在生产中为 Docs 插件的 React Storybook 启用道具类型

Kev*_*ndy 8 reactjs webpack react-proptypes storybook

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

在本地运行故事书时,一切正常。检测道具类型并生成此表。

SpinningLoader.propTypes = {
  color: PropTypes.string,
  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
};
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

但是,由于默认情况下在生产中禁用了 prop-types。当故事书部署到静态站点时,无法检测到它们。

在此处输入图片说明

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

小智 -5

“propTypes”是一个有用的功能,通过它我们可以验证 React 中 props 的类型检查,但它也会不必要地产生运行时开销。它会降低应用程序的性能。

这就是它无法在生产中使用的原因。

它的目的是帮助开发人员,特别是团队中的开发人员,在开发环境中编写代码时查明是否有任何错误类型的道具传递给组件。它不添加任何额外的功能。它还会添加不必要的额外代码行。

如果将其保留在生产流程中,就会达不到整个目的。

无论您是否也使用 Flow/typescript 进行类型检查,其目的都是相同的。参考: https: //reactjs.org/docs/typechecking-with-proptypes.html

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