預覽和建置文件
Storybook 讓您能夠建立豐富且廣泛的文件,這將有助於您和參與開發流程的任何其他利害關係人。開箱即用,您就擁有不僅能撰寫文件,還能預覽和建置文件所需的工具。
預覽 Storybook 的文件
在開發的任何階段,您都可以預覽您撰寫的文件。當您使用 --docs
標記時,Storybook 允許您產生最終文件的預覽。我們建議將其包含在您的 package.json
中作為一個新的腳本
{
"scripts": {
"storybook-docs": "storybook dev --docs"
}
}
根據您的設定,當您執行 storybook-docs
腳本時。Storybook 將進入文件模式,並產生不同的建置。
它將尋找任何在 MDX 或 CSF 中可用的 stories,並根據您新增的文件來顯示它...
相較於正常的 Storybook 建置,此建置模式有一些注意事項
- 頂層項目指的是您元件的主要 story。
- 每個個別的 story 現在都處於扁平顯示模式,具有不同的一組圖示。這樣可以專注於文件本身。
- Storybook 的版面配置呈現方式不同。工具列將不會顯示。
發佈 Storybook 的文件
您也可以像發佈您的 Storybook 一樣發佈您的文件。您可以將 --docs
標記與 storybook build
命令一起使用。我們也建議將其作為腳本包含在您的 package.json
檔案中
{
"scripts": {
"build-storybook-docs": "storybook build --docs"
}
}
根據您的設定,當執行 build-storybook-docs
腳本時,Storybook 將再次進入文件模式,並產生不同的建置,並將文件輸出到 storybook-static
資料夾中。
上述相同的注意事項將適用。
您可以使用任何託管服務提供商來部署您的文件,例如
深入了解 Storybook 文件