首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Storybook + Typescript中使用babel-plugin plugin?

在Storybook + Typescript中使用babel-plugin plugin,可以按照以下步骤进行:

  1. 首先,确保你已经在项目中安装了Storybook和Typescript的相关依赖。
  2. 在项目根目录下创建一个名为.babelrc的文件,并添加以下内容:
代码语言:txt
复制
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["babel-plugin-plugin-name"]
}

将上述代码中的babel-plugin-plugin-name替换为你要使用的具体babel插件的名称。

  1. 在项目根目录下创建一个名为.storybook的文件夹,并在该文件夹下创建一个名为webpack.config.js的文件。
  2. webpack.config.js文件中添加以下内容:
代码语言:txt
复制
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [['react-app', { flow: false, typescript: true }]],
          plugins: ['babel-plugin-plugin-name']
        }
      },
      require.resolve('react-docgen-typescript-loader')
    ]
  });

  config.resolve.extensions.push('.ts', '.tsx');

  return config;
};

同样,将上述代码中的babel-plugin-plugin-name替换为你要使用的具体babel插件的名称。

  1. 确保你已经在项目中安装了相应的babel插件和loader。可以使用以下命令进行安装:
代码语言:txt
复制
npm install babel-plugin-plugin-name babel-loader react-docgen-typescript-loader --save-dev
  1. 最后,重新启动Storybook,并确保你的babel插件已成功应用于Storybook中的Typescript代码。

通过以上步骤,你就可以在Storybook + Typescript中使用babel-plugin plugin了。请注意,上述步骤中的babel-plugin-plugin-name需要替换为你要使用的具体babel插件的名称。同时,如果你需要使用其他的babel插件或loader,可以根据需要进行安装和配置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Sentry 开发者贡献指南 - 前端(ReactJS生态)

theme 属性 Babel 语法插件 新语法 可选链 语法 空值合并 语法 Lodash Typescript 迁移指南 Storybook Styleguide 我们使用它吗?...Typescript Typing DefaultProps 迁移指南 Grid-Emotion Storybook Styleguide 引用其文档,“Storybook 是用于 UI 组件的 UI...要在本地运行 Storybook,请在 getsentry/sentry 存储库的根目录运行 npm run storybook。 它部署在某个地方吗?...https://storybook.sentry.dev Typing DefaultProps 由于 Typescript 3.0 默认 props 可以更简单地输入。...在需要少量状态或访问 react 原语(引用和上下文)的展示组件,它们通常是一个不错的选择。例如,具有滑出(slide-out)或可展开状态(expandable state)的组件。

6.9K30
  • vue2项目中如何使用es2020

    官方提供的预设 名称 说明 @babel/preset-env 编译 ES2015+ 语法 @babel/preset-typescript 编译 Typescript 语法 @babel/preset-react...presets: [ "@babel/preset-env", ], name 规范化 默认情况下,Babel 期望插件在其名称具有 babel-plugin- 或 babel-preset- 前缀...” babel-plugin-/babel-preset- 将作为前缀注入任何名称没有它的@-scoped 包 “@scope/mod” “@scope/babel-plugin-mod” 如果只给出...@-scope 名称,babel-plugin/babel-preset 将作为包名称注入 “@scope” “@scope/babel-plugin” 官方地址:https://babeljs.io...:根据@babel/preset-env 版本,来确定是否包含 ES2020 特性; 第四步:如果已包含,则工程可以使用;跳过后续所有步骤; 第五步:如果不包含,或去对应 plugin,列表地址

    1K10

    vue2项目中如何使用es2020

    官方提供的预设 名称 说明 @babel/preset-env 编译 ES2015+ 语法 @babel/preset-typescript 编译 Typescript 语法 @babel/preset-react...presets: [ "@babel/preset-env", ], name 规范化 默认情况下,Babel 期望插件在其名称具有 babel-plugin- 或 babel-preset- 前缀...” babel-plugin-/babel-preset- 将作为前缀注入任何名称没有它的@-scoped 包 “@scope/mod” “@scope/babel-plugin-mod” 如果只给出...@-scope 名称,babel-plugin/babel-preset 将作为包名称注入 “@scope” “@scope/babel-plugin” 官方地址:https://babeljs.io...:根据@babel/preset-env 版本,来确定是否包含 ES2020 特性; 第四步:如果已包含,则工程可以使用;跳过后续所有步骤; 第五步:如果不包含,或去对应 plugin,列表地址

    1.9K20

    Storybook 7 来了:迄今为止最大的更新

    看起来好像解决了很多我在使用过程的痛点,下面我来和大家一起分享 Storybook 7.0 - Next-level component development and testing: 正文 Storybook...改进的类型安全性 我们在 CSF3 改进了对 TypeScript 的支持。更严格的类型提供了更好的编辑器检查和自动补全,为 TypeScript 用户带来了巨大的提升。有关详细信息,请查看。...使用 MDX 引用导入 stories Storybook 7 鼓励所有用户在 CSF3 定义 stories,然后在 MDX 引用它们。...你可以在浏览器调试事件流,并使用我们的测试运行器从命令行并行执行所有测试。...Default exports:SB main/preview 设置,带有TypeScript 类型。 SolidJS 集成:社区驱动的SolidJS Vite 支持。

    49730

    前端开发的新纪元:全方位工具栈探索 | 开源专题 No.57

    它从头开始设计,可以根据不同的使用情况轻松地在库和框架之间进行扩展。Vue 由一个专注于视图层的核心库组成,并且还有一系列支持性库来帮助您处理大型单页应用程序的复杂性。...提供 Web 平台功能和 API ( ES 模块、Web Workers 和 fetch())。 开箱即用支持 TypeScript。...storybookjs/storybook[3] Stars: 79.9k License: MIT picture Storybook 是一个用于构建 UI 组件和页面的前端工作坊,可以独立地进行开发...以下是该项目的主要功能和核心优势: 可按需引入:只会将您使用到的模块导入到应用程序包。 移动友好:旨在在手机网站、手机 Web 应用以及手机原生/混合应用中使用。...可以安全地与其他库 ( jQuery,Zepto,jQuery Mobile 等) 一起使用

    14010

    从零开始,手摸手搭建前端组件库

    优化代码与使用jsV8补丁做效能调校,编译速度更快。webpackbabel-loader的版本不低于@babel/core的版本,否则编译会报错 以vue-cli 2.9.6版 的版本举?...index.js引入相关的vue文件,提供install方法XX.vue文件 引入less文件,内置less打包的时候对于compont下的文件使用CopyWebpackPlugin复制到lib目录下...,也就是第二种按需加载的方式less的使用utils配置less-loader 注意loader的解析规则 附录一段less使用的示例 @hd: 1px; // 基本单位// 支付宝钱包默认主题//...当时以为vue-loader15 是要搭配webpack4 一起使用的 所以降低了一下storybook的版本低版本的storybook 默认使用babel6 只能解析.babelrc 且需要自定义...readme文档改造为组件的使用文档类似于目前知名组件库 antd,element-ui,vant等支持代码库高亮显示,组件动态展示等效果,简而言之一句话: 能够在md运行代码。

    2.7K30

    在 React 中使用 Storybook,构建强大的自定义 UI 组件

    Storybook使开发人员能够使用独立的构建块独立地构建UI组件。使用Storybook,您可以使用您最喜欢的框架快速创建UI组件,同时还提供一个整洁的接口来处理每个组件。...此外,它还集成了最流行的JavaScript框架,React、Vue甚至Ruby。 你应该在React中使用Storybook吗?...准备 这是你开始使用Storybook时需要做的: 基本了解React、JavaScript和TypeScript 一个代码编辑器,比如Visual Studio code Node.js安装在您的机器上...事实上,Storybook会检测到你正在使用Create React App,并为你安装依赖项。这是有帮助的,特别是如果你是一个初学者。 在本教程,我们使用的是Next.js。...在 React APP 中使用 story 要在React应用中使用这个故事,我们可以导入创建好的Banner。在你的Next.js安装,把jsx文件放到index.js文件夹

    9.2K10

    【JavaScript】ESlint & Prettier & Flow组合,得此三神助,混沌归太清

    Flow Flow的意义 Flow是faceBook开源的一个JavaScript静态类型检查工具,作用类似TypeScript,但是它不像TS那样是一门独立的语言,而是作为一个babel-plugin...你想如何使用eslint?1.检查语法2.检查语法并且发现问题3.检查语法,发现问题并强制约定代码风格 Q2. 你的项目使用的模块化方式?...你使用到的框架? 1.React 2.Vue 3. None of these Q5. 你的项目使用TypeScript? 1.Y 2.N (爽!...我们有extends配置项这个好东西,它提供的继承功能直接集成了一些默认的配置,如下 "extends":[ "eslint:recommended", "plugin:@typescript-eslint...你需要安装eslint-plugin-react这个插件 然后在配置增加以下内容 "plugins":["react”] 就OK了 运行示例 ?

    1.1K20

    基于 React、TS的聊天室monorepo实战

    命令如下: 初始化 React+TS 环境 npx create-react-app component --typescript 初始化 Storybook cd component npx -p @...npx create-react-app app --typescript 整个聊天室项目采用的是多包管理模式,所以在开发时我们会直接通过 lerna link命令来创建软连接,因此可以不必通过发布包来完成依赖的使用...消息组件设计 虽然项目是基于 Material-UI 开发的,但考虑到业务带来的差异性,组件库可能需要高度定制,故直接采用全量导出的方式来使用基础 UI 组件。...另外,如果组件层级比较多,组件粒度拆得比较细的话,在不考虑业务组件复用的情况下,可以引入一些共享状态,:currentUserId、socket、activeTool 等,可有效避免父子组件状态传达,...QA 这一节我通过问答的方式来快速过一下开发聊天室可能遇到的问题: 如何实现表情发送 简单的表情可以当做文本来处理,如果需要考虑兼容性的话,可以用图片。

    1.8K10

    前端基建处理之组件库优化方案

    (不同的开发的编辑器配置不一样,导致大家提交上来的代码五花八门) 组件没有文档和预览(写公共组件的开发实现之后就没有花更多时间在文档和预览上,导致其他开发要使用组件的时候有上手成本,而且不方便熟悉这些公共组件的功能和使用...component: 这是你想要展示的组件,Storybook使用它来自动生成文档页(如果你启用了这个功能)。...在这个例子,所有的 args 和 argTypes 都被传递给 MyButton 组件,你可以在 Storybook 的 UI 调整它们的值。...需要引入这些element的组件,这里我们在.storybook/preview.js引入element,参考如下 import ElementUI from "element-ui"; import...storybook,可以在本地预览,如果我们要单独把storybook单独部署一个到一个站点,其他开发可以直接打开去看 增加构建命令 在package.json增加命令,构建出storybook的产物

    35210

    大势 | 2018最值得关注的JavaScript趋势

    谈到取悦开发者,不要忘了Facebook今年在BSD+Patents的收钱事件遭遇的史诗般的失败,这惹恼了不少的开发者。...Storybook 哇哦,2017年Storybook真的是火了。 Storybook是一个定义、开发和测试UI组件的环境。 它从年初的几乎一潭死水变成年中的大规模流行,这要感谢社区的巨大努力。...你可能已经碰到过用Storybook来设计的开源项目了,但如果想自己看看它是怎么用的话,那就看看用Storybook设计的Airbnb的日期选择器。...Flow & Typescript Typescript 和 Flow 都是JavaScript开发者很好的静态类型选项,可以用来改进其代码质量。...6.StorybookStorybookStorybook! 7.在一个项目上安装Prettier,让你的代码可读性更强。 8.在一个React项目上学习使用Jest截屏及Enzyme。

    79820
    领券