如何修改storybook源码?

本文介绍了如何修改storybook源码。官方推荐特定环境,需下载或克隆项目并安装依赖。修改不同内容要找到对应项目包,如修改界面有大概位置。还分享了打包方式,包括进入特定文件夹、执行命令、选择要打的包等步骤,最后复制文件夹完成打包。

如何修改storybook源码?

官方推荐环境是linux,如果是window,可以使用docker

下载或克隆源代码项目

git clone https://github.com/storybookjs/storybook.git

安装依赖

yarn start
# 时间很长,耐心等待

这个项目中,包含非常非常多的包和各种 storybook 插件,所以要修改不同内容,需要找到对应的项目包,比如要修改修改ui界面,它的位置在 code 文件夹下的manager 文件夹,比如要修改搜索的名字大概位置是 src\components\search.tsx(上面是大概位置,具体位置看看源码,应该容易找到的)
修改之后如何打包呢?
有点麻烦,这里分享下我的是方式
首先进入code文件夹

cd code

然后执行打包命令

yarn build manager-ui

此时将会提示是否开启观察者模式
在这里插入图片描述
回车继续
在这里插入图片描述
回车继续
在这里插入图片描述
选择要打的包(在storybook 称为template)
ui 界面的包在最后个选项
在这里插入图片描述
空格表示选定,回车
要稍微等一下
那么打包后的内容在哪里呢?
在这里插入图片描述
dist文件夹复制出来,就大功告成了!!!

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值