フロントエンドステップ(7)-react、vueコンポーネント開発利器:storybook

react、vueコンポーネント開発利器:storybook
フロントエンド開発にとって、コンポーネント化技術はすでに必修科目であり、その中でreactとvueが主である.しかし、通常、コンポーネント、特に共通コンポーネントまたはサードパーティコンポーネントライブラリを開発する際には、いくつかの問題が発生します.

は複数のコンポーネントをうまく管理することができず、特にコンポーネントのプレビュー時に

を一目瞭然に管理することができない.

は、コンポーネントのプレビュー時にも、1つのコンポーネントの複数の異なる状態

にうまく反応することができない.

自動化インタラクティブテストはenzymeを使用できますが、手動でテストすることが多いので、

が面倒です.

ドキュメントを書くときは、コンポーネントのプレビューとドキュメントを一緒に書く必要があり、異なる状態に切り替える必要があります.

そのため、storybookはこれらの問題を解決するために現れ、あなたのコンポーネントのために強力な開発環境を構築し、主に以下のいくつかの機能を提供しています.

は強力なUIコンポーネント管理ページを提供し、便利で明確なグループ化、複数のコンポーネントまたは1つのコンポーネントの複数の異なる状態

を管理することができる.

自動化インタラクティブテストに加えて、手動インタラクティブテストを容易に行うことができ、コンポーネントパラメータを動的に変更し、ビューの変更

を表示することができる.

は、コンポーネントのプレビューを静的リソースとしてエクスポートすることができ、これにより、コンポーネントのドキュメントと異なるパラメータに対応する異なるビュー

を容易に表示することができる.

には、コンポーネントの開発、テスト、最適化を支援する追加の機能がたくさんあります.

コミュニティにはstorybookを使用して開発されているコンポーネントライブラリがたくさんあります.たとえば、次のようなものです.

react-datesのstorybook react-dates-storybook

react-native-webのstorybook react-native-web-storybook

ついでに図を切りましょう
1.フレーム適合

React

React Native

Vue

Angular

Polymer

Mithril:現在alpha段階

にある

Marko:現在alpha段階

にある

HTML:現在alpha段階

にある

Svelte:現在alpha段階

にある

Riot:現在alpha段階

にある
2.開発とコマンド
2.1 storyを書く方法
storybook-Writing Storiesを表示し、storiesとプラグインの書き方を理解します.
2.2 storybookの追加

#       
npm i -g @storybook/cli

#        （          ，             ）
cd my-project-directory
getstorybook

#    storybook
npm run storybook

storybookまたはそのプラグインを手動で追加する必要がある場合は、次を参照してください.

Storybook for React

Storybook for Vue

Storybook for Angular

2.3コンポーネントプレビューを静的リソースとしてエクスポートする

#     package.json   scripts
{
  "export-storybook": "build-storybook -c .storybook -o .out"
}

#     
npm run export-storybook

3.後続
その他のブログhttps://github.com/senntyou/blogs
作者:深予之(@senntyou)
自由転載-非商用-非派生-署名保持(クリエイティブ共有3.0ライセンス)