使用StoryBook开发UI组件管理
浏览：592 次
前言
最近，我发现还有一个技术博客帖子本月还没有写完。尽管每天积累的任何文章或最近重新构建的一些要点都可能被愚弄，但我决定做点什么。。。
最近，有一项要求。在我正在进行的重构项目中，我想为将来的其他项目提取一些组件。然后我需要开发两个前端项目，它们有一些共同的组件需求。纯静态页面不适合，因为我现在在技术堆栈上有React+Typeslice。我想成为即插即用的人。顺便说一下，定义道具和状态，你可以在将来更改它们。本来，我立了一面旗帜，想自己做点什么，但微信群里有人扔了一个链接，
乍一看，它似乎说明了我的需要。因此，今天的目标是创建一个开发环境。
确定要求
Storybook是UI组件的开发环境。它允许您浏览组件库，查看每个组件的不同状态，并以交互方式开发和测试组件。
然而，官方的github介绍非常糟糕，所以我建议您了解更多。
以及
让我们明确我们的需求：
支持加载蚂蚁设计和其他UI库
Typescript支持
支持重做
支持参数调试
正式开始
根据想法创建一个反应项目以支持ts
创建react app my app--scripts version=react scripts ts
然后更新从属包
纱线升级
然后按照故事书
npm i-g@故事书/cli
cd我的app
获取故事书
然后直接运行yarn run故事书以查看界面
然而，事实并非如此简单。因为支持TS的是项目本身，而故事书是独立的。因此，您需要根据配置进行各种修改。
首先，创建webpack.config。中的js。故事书目录
加载类型脚本加载程序
//加载默认配置生成器。
const genDefaultConfig=require（“@storybook/react/dist/server/config/defaults/webpack.config.js”）；
单元exports=（baseConfig，env）=>{
常量配置=genDefaultConfig（baseConfig，env）；
//根据需要进行扩展。
//例如，添加typescript加载程序：
配置模块规则推送({
测试：/\.（ts|tsx）$/，
loader:require.resolve（'wesome-typescript-loader'）
});
config.resolve.extension.push（'.ts'，'.tsx'）；
返回配置；
};
然后转换package.json
{
“name”：“我的app”，
“版本”：“0.1.0”，
“private”：真，
“依赖关系”：{
“反应”：“^16.0.0”，
“反应dom”：“^16.0.0”，
“反应脚本ts”：“2.7.0”
},
“脚本”：{
“start”：“react scripts ts start”，
“构建”：“反应脚本ts构建”，
“test”：“react scripts ts test--env=jsdom”，
“弹出”：“反应脚本ts弹出”，
“故事书”：“开始故事书-p 6006”，
“构建故事本”：“构建故事书”
},
“devDependencies”：{
“@storybook/addon actions”：“^3.2.12”，
“@storybook/addon链接”：“^3.2.12”，
“@storybook/react”：“^3.2.12”，
“@types/jest”：“^21.1.2”，
“@types/node”：“^8.0.39”，
“@types/react”：“^16.0.12”，
“@types/react-dom”：“^16.0.1”，
“@types/storybook__react”：“^3.0.5”，
“很棒的打字加载器”：“^3.2.3”
}
}
然后最重要的一点是将根目录下的stories目录移动到src目录
编写索引.tsx
从“React”导入React；
从“@storybook/react”导入｛storiesOf｝；
从“@storybook/addon actions”导入｛action｝；
从“@storybook/addon links”导入｛linkTo｝；
从“@storybook/react/demo”导入｛Button，Welcome｝；
storiesOf（“欢迎”，模块）。添加（'到故事书'，（）=>）；
storiesOf（“按钮”，模块）
.add（'带文本'，（）=>Hello按钮）
.add（'带一些表情符号'，（）=>
