当前位置:网站首页>使用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
边栏推荐
猜你喜欢
随机推荐
LLVM系列第十九章:写一个简单的Module Pass
Binder机制(下篇)
设备驱动框架简介
刷卡芯片CI520可直接PIN对PIN替换CV520支持SPI通讯接口
arm ldr系列指令
FP7195转模拟恒流调光芯片在机器视觉光源的应用优势
什么是外生变量和内生变量
为android系统添加产品的过程
FP7128内置MOS降压恒流调光深度0.01%高辉共阳调光方案
LLVM系列第二十五章:简单统计一下LLVM源码行数
机器学习和深度学习中的梯度下降及其类型
tensorflow实战之手写体识别
Tensorflow张量生成
Ffmpeg交叉编译
In the Visual studio code solutions have red wavy lines
CS4398音频解码替代芯片DP4398完全兼容DAC解码
LLVM系列第四章:逻辑代码块Block
STL容器自定义内存分配器
使用预训练语言模型进行文本生成的常用微调策略
Tensorflow常用函数









