当前位置:网站首页>使用npx -p @storybook/cli sb init安装失败,手把手搭建专属的storybook
使用npx -p @storybook/cli sb init安装失败,手把手搭建专属的storybook
2022-08-02 14:09:00 【N.S.N】
1.全局安装Storybook
npm i -g storybook
2.执行以下命令安装@storybook/react
npm i --save-dev @storybook/react
3.在package.json文件中
{
"scripts": {
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
}
4.在工程根目录创建.storybook目录
5.在.storybook目录下创建config.js文件
import {
configure, addDecorator } from '@storybook/react';
configure(require.context('../src', true, /\.stories\.tsx$/), module)
6.自己创建以.stories.js结尾的文件
7.需要集成typescrip,则创建webpack.config.js文件在.storybook文件夹里
module.exports = ({
config }) => {
config.module.rules.push({
test: /\.tsx?$/,
use: [
{
loader: require.resolve("babel-loader"),
options: {
presets: [require.resolve("babel-preset-react-app")]
}
}
]
});
config.resolve.extensions.push(".ts", ".tsx");
return config;
};
8.安装其他依赖
cnpm i @storybook/addon-actions @storybook/addon-links @storybook/addons -D
[email protected]/preset-create-react-app用来代表您配置Storybook。这是由Storybook在自动设置(Storybook 5.3或更高版本)期间安装的。
cnpm i --save-dev @storybook/preset-create-react-app
边栏推荐
猜你喜欢
随机推荐
FP7195转模拟恒流调光芯片在机器视觉光源的应用优势
对疫情期间量化策略表现的看法
DP4344兼容CS4344-DA转换器
6. How to use the CardView production card layout effect
设备驱动框架简介
7. How to add the Click to RecyclerView and LongClick events
LLVM系列第二十七章:理解IRBuilder
基于GPT的隐变量表征解码结构
【目标检测】YOLO v5 吸烟行为识别检测
使用flutter小记
FP7122降压恒流内置MOS耐压100V共正极阳极PWM调光方案原理图
利用红外-可见光图像数据集OTCBVS打通图像融合、目标检测和目标跟踪
【我的电赛日记(三)】STM32学习笔记与要点总结
Policy Evaluation收敛性、炼丹与数学家
vscode compiles the keil project and burns the program
语言模型(NNLM)
PyTorch(12)---损失函数和反向传播
【我的电赛日记(完结)---2021全国大学生电子设计竞赛全国一等奖】A题:信号失真度测量装置
PyTorch③---torchvision中数据集的使用
source /build/envsetup.sh和lunch)









