如何发布一个故事书插件

与社区分享你的故事书插件

加载
Varun Vachhar
@winkerVSbecks

最后发表,你得到了插件api的概述,并构建了你的第一个插件. 为了与其他Storybook用户共享这个插件,你需要打包并发布它.

插件目录 是所有故事书插件的家. 它是十博体育备用网址展示你的插件以及开发者如何发现新插件的地方. 这篇文章告诉你如何准备你的插件发布, 包了, 然后发布到目录中.

准备发布你的插件

和JavaScript生态系统中的大多数包一样,故事书插件也是通过npm发布的. 然而,它们有特定的标准:

  1. 有一个 经销 目录中包含编译后的ES5代码
  2. A 预设.js 文件,作为ES5模块编写
  3. A 包.json 声明:文件
    • Peer-dependencies
    • 模块的相关信息
    • 目录元数据

十博体育备用网址一个一个来解决这些问题.

构建系统

您可能会使用ES6编写插件代码,并依赖于像JSX这样的特性. 因此,插件代码需要转译到ES5. 有很多方法可以做到这一点. 我的建议是使用 巴别塔CLI. 你可以通过以下方式安装:

NPM安装——save-dev @babel/core @babel/cli

通天塔是一个灵活的工具. 它将各种新的JavaScript特性或特定于框架的特性转换到ES5中. 十博体育备用网址依赖于预定义的和社区管理的Babel预设来为十博体育备用网址管理所有这些功能.

安装NPM——save-dev @babel/预设-env @babel/预设-反应

在这里, 预设-env 负责最新的JavaScript特性和 预设-反应 管理React特定的特性,例如转换JSX. 添加一个 .babelrc.js 在项目的根目录,并配置它以使用这些预置.

// .babelrc.js

模块.出口= {
  预设:[' @babel / 预设-env”、“@babel / 预设-反应 '),
};

十博体育备用网址定义一些与构建相关的脚本.

/ /包.json

 "脚本":{
   “清洁”:“rimraf ./ 经销 ",
   “构建”:“巴别塔 ./ src——out-dir ./ 经销 ",
   "storybook": "start-storybook -p 6006",
   "start": "concurrent \"npm run storybook\" \"npm运行构建 -- --watch\"",
   ...
 },

运行 npm运行构建 将ES5代码输出到 经销 目录. 在运行 npm开始 会在观察模式下运行巴别塔CLI并同时启动Storybook吗. 手表模式是超级方便的本地开发. 每次保存时,它都会重建插件并刷新Storybook.

根级别预设

第二个要求是有一个根级别的预设. 十博体育备用网址的插件使用预置,定义在 src /预设.js. 让十博体育备用网址创建一个 预设.js 属性的项目根目录下的 经销 输出:

/ /预设.js

模块.出口=要求(“./ 经销 /预设');

您还应该更新Storybook配置,以使用这个根级别预设.

// .故事书/主要.js

模块.出口= {
  故事:[
    '../ * * / * /故事.故事.mdx’,
    '../ * * / * /故事.故事.@ (js | jsx | ts | tsx)”,
  ],
  插件:[“@storybook / addon-essentials”、“../预设.js'],
};

模块的元数据

接下来,十博体育备用网址需要声明一些关于插件的关键信息 包.json 文件. 这包括模块的主要入口点,以及发布插件时要包含哪些文件. 和你可能有的同伴依赖关系-至少 反应反应-dom.

/ /包.json

“主要”:“经销 /预设.js",
“文件”:[
 “经销 / * * / *”,
 “自述文件.md",
 "*.js"
],
“依赖”:{
  “@storybook /插件”:“^ 6.0.0"
},
" peerDependencies ": {
  “反应”:“^ 16.8.0 || ^17.0.0",
  :“反应-dom ^ 16.8.0 || ^17.0.0"
}

为什么peer-dependencies? 假设您正在构建一个使用React的表单库. 如果您将React作为一个依赖项,那么React代码将与您的库一起打包. 您的用户已经在他们的代码库中安装了React. 如果这碰巧是一个不同的版本,它会导致他们的应用程序崩溃. 这里也是一样的.

目录元数据

除了模块相关的信息,你还需要为Storybook插件目录指定一些元数据.

其中一些信息可能已经在 包.json 因为你需要把它提供给NPM. 例如,插件名称,描述,作者信息. 其余部分通过storybook属性提供. 比如显示名称、图标或支持或不支持框架的列表. 要了解元数据API的完整规范,请查看 插件元数据文档.

/ /包.json

“名称”:“storybook-addon-outline”,
“版本”:“1.0.0",
"description": "一个故事书插件,用于可视化调试CSS布局和对齐",
“作者”:“winkerVSbecks”,
“故事”:{
 “displayName”:“大纲”,
 “unsupportedFrameworks”:“反应-native”,
 “图标”:“http://yoursite.com/outline-icon.png”,
},
“关键词”:[
 “storybook-addons”,
 “风格”,
 “大纲”,
 “css”,
 “布局”,
 “调试”
],

这里的keywords属性映射到目录标记. 例如, storybook-addons 标签确保你的插件将进入目录. 和 外观 是一个顶级类别. 其余帮助您的插件的可搜索性.

发布到NPM

十博体育备用网址快速回顾一下到目前为止十博体育备用网址所做的. 十博体育备用网址建立了一个构建系统来将插件代码转换到ES5. 添加根级别预置. 并在包中定义了模块和目录的相关信息.json文件. 最后一步是发布插件.

插件会被发布到npm注册表中. 确保你有 签约 对于一个NPM用户帐户,运行如下命令:

npm版本1.0.0 -m "创建了第一个版本的大纲插件:%s"
npm发布

这就是结果! 十博体育备用网址已经成功地将十博体育备用网址的包发布到npm,并发布了十博体育备用网址的第一个Storybook插件. 你可以查看官方的大纲插件 目录.

结论

插件帮助社区定制和自动化Storybook. 发布你的插件,与成千上万的开发者分享. 我很期待看到你的成果!

注意,你的插件可能会延迟显示在目录中,因为它抓取npm. 如果你的插件没有出现,请提交一个问题 目录回购.

要深入了解包发布,请查看 跨组织分发UI 开发人员的设计系统章节. 它涵盖了诸如生成变更日志和自动发布等主题.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4,428 开发人员和计数

十博体育备用网址正在招聘!

加入故事书和彩色后面的团队. 构建被成千上万的开发人员用于生产的工具. Remote-first.

视图的工作

受欢迎的文章

角色和电子邮件注册

为生产团队提供细粒度的用户权限
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深度指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水通讯,可以获得免费的教程、指南和通过电子邮件发给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10