web-dev-qa-db-ja.com

React Docsアドオンのストーリーブックのプロダクションでプロップタイプを有効にする方法

デフォルトでは、反応型アプリのプロップタイプは本番環境では実行されません。これはパフォーマンスを向上させるために良いことだと思います。ただし、作成した Storybook があり、静的サイトに展開しています。 Storybookには、ドキュメントと呼ばれるアドオンがあり、コンポーネントの小道具タイプを検出し、読みやすいドキュメントの小道具タイプのテーブルを作成します。

ストーリーブックをローカルで実行すると、すべてが完璧に機能します。プロップタイプが検出され、このテーブルが生成されます。

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

enter image description here

ただし、プロップタイプはデフォルトで本番環境で無効になっているためです。ストーリーブックが静的サイトに展開されている場合は検出できません。

enter image description here

プロダクションでプロップタイプを有効にする方法はありますか？それとも他の回避策ですか？

reactjswebpackstorybookreact-proptypes
7
Kevin Vandy

セットアップの詳細を見ないで知ることは少し難しいです。デフォルトのストーリーブックコマンドと追加の構成なしで構築する場合は、「正常に動作する」べきです...

コメントで述べたように、 Storybookには特定のビルドコマンドがありますpackage.jsonに追加して、静的アプリとしてエクスポートできます。

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

そのコマンドを使用してもまだ機能しない場合は、カスタムのWebpack /ビルドワークフローを使用していますか？それらも投稿できますか？

参照用に最小限のリポジトリを作成しました。これは、設定の比較に役立つ場合があります。 package.jsonのパッケージの他に、実際には3つのファイルのみです。 Storybook config、a React component、およびComponent Story：

。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コンポーネントと[ドキュメント]タブが表示されますそれはプロップタイプを含みます：

enter image description here

参照用の完全なリポジトリ

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

1
Ben