@storybook/storybook-deployer 是一个 npm 包，用于在 GitHub Pages 上部署 Storybook，它支持部署到远程仓库或本地仓库。本教程将介绍该 npm 包的用法及相关技术内容。
一、安装
先用 npm 安装 @storybook/cli，如果已安装可跳过此步骤。
npm install -g @storybook/cli
在项目目录下，用 npm 安装 @storybook/storybook-deployer：
npm install --save-dev @storybook/storybook-deployer
二、配置
在项目根目录下创建文件 .storybook/main.js，输入以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-------- ----------------------------
------- ---------------------------- ------------------------- --------------------------------
------------- ----- ------ -- -
------------------------- - ----------------------- ----------
------ -------
--
--上述代码配置了 Storybook 所需要的配置及其 alias。
三、使用
- 在 package.json 文件中的 scripts 中添加部署命令：
"scripts": {
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"deploy-storybook": "build-storybook && storybook-to-ghpages"
}- 运行命令：
npm run deploy-storybook
- 可以在 GitHub Pages 上见到 Storybook 运行界面。
四、学习与指导意义
使用 @storybook/storybook-deployer 可以帮助项目快速部署 Storybook 工程，方便开发人员快速体验，测试和查看组件效果。同时，该 npm 包的使用也展示了诸如 webpack 配置、npm 包的使用等相关技术，这对前端开发人员有很好的学习意义。
五、示例代码
可以访问官方 GitHub 仓库 storybook-deployer 查看示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/200969