前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用typescript rollup storybook创建你的react组件库

使用typescript rollup storybook创建你的react组件库

作者头像
lilugirl
发布2021-03-11 11:38:40
2.1K0
发布2021-03-11 11:38:40
举报
文章被收录于专栏:前端导学前端导学
代码语言:javascript
复制
mkdir mylibrary
cd mylibrary
npm init -y
npx -p @storybook/cli sb init --type react
npm i -D fork-ts-checker-webpack-plugin typescript

配置 .storybook/main.js文件 内容如下

代码语言:javascript
复制
module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-actions",
    "@storybook/addon-links"
  ],typescript:{
    check:false,
    checkOptions:{},
    reactDocgen:'react-docgen-typescript',
    reactDocgenTypescriptOptions:{
      shouldExtractLiteralValuesFromEnum:true,
      propFilter:(prop)=>(prop.parent? !/node_modules/.test(prop.parent.fileName):true),
      
    },
  },
};

在根目录创建 tsconfig.json文件 ,内容如下

代码语言:javascript
复制
{
    "compilerOptions":{
        "declaration": true,
        "declarationDir":"build",
        "module":"esnext",
        "target":"es5",
        "lib":["es6","dom","es2016","es2017"],
        "sourceMap":true,
        "jsx":"react",
        "moduleResolution":"node",
        "allowSyntheticDefaultImports":true,
        "esModuleInterop":true
    },
    "include":["src/**/*"],
    "exclude":["node_modules","build"]
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档