npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@beisen/storybook-lib

v1.4.66

Published

<p align="center"> <img alt="Shield" src="http://lc-cj3ctxdw.cn-n1.lcfile.com/baf8019f3a541823d42a.png" height="400px" with="700px" /> </p>

Downloads

316

Readme

About

在前端开发领域,业务开发普遍组件化。这种模式下,对源码的维护就有很大的挑战。目前有两种维护方式 MONOMULTI。在维护大量组件时,使用MONO既可以保证组件的独立性,又可以减少维护成本。

目前针对于MONO已经有了不少的管理工具,Lerna 是一个不错的管理工具。但,对于前端组件开发领域,Lerna的配置和使用有些繁琐,也不利于集成进自己 CI 任务中,为了在 开发集成 时中更方便的管理组件 knight-shield 便由此产生

Getting Started

Installing

$ npm install @beisen/storybook-lib --save-dev

Usage

$ npx sbl storybook start # 组件调试
$ npx sbl publish npm # 发布组件
$ npx sbl buil lib # 编译lib

Monorepo

使用 sbl storybook 功能可以很方便的调试组件。但,在某些场景下往往需要和项目中其他的代码进行联合调试。在这种场景下可以结合 yarn,使用其提供的 workspaces 功能

Project Structure

在 components/ 中的组件都是MONO的维护方式,是独立的模块。在复杂项目中可能会存在MONO中模块互相依赖的情况,使用yarn的 link: 协议创建依赖

{
  "dependencies": {
    "button": "link:../button"
  }
}

项目中的非MONO模块代码如需引用MONO中的模块,可直接使用 ./src/**/js 方式引用即可,如上图所示 pages 对 button-group 的引用

注意:整个项目是一个大版本,项目的维护者完全不要关心子模块的版本。因屏蔽子模块的版本号,减少了开始者在维护子模块互相依赖时更新版本号带来的成本

CI

对于项目开发来说,无论是MONO模块还是非MONO模块,只需要修改源代码即可。执行 git push 之后,在执行jenkins任务时,添加 npx sbl publish npm --independent --only-updated 实现增量发布MONO中的模块,子模块的版本使用的是项目的版本号

Dependencies

StorybookLearn 已助实现了部分功能。基于Storybook之上封装了一系列配件和功能实现了调试功能。基于了Lerna的内部模块(@lerna/package, @lerna/package-graph, @lerna/output)实现了组件发布功能

Developers

License

MIT