参加线上会议:美东时间周四上午 11 点,Storybook 9 版本发布 & AMA

Storybook 失效链接

一个 Storybook 插件,用于检查 Storybook markdown 文件中的所有超链接,以确定它们是否有效

在 Github 上查看

Storybook Deadlink Checker

example workflow NPM release NPM Downloads

一个轻量级的 Storybook 插件,用于验证使用 @storybook/addon-links 包创建链接的 Storybook stories 中的失效链接。

亮点

  • 支持 Node v8.x 及以上版本
  • 验证 stories 中的所有锚点/内部链接(例如 #my-link)
  • 验证 stories 中的所有外部链接(例如 https://my-link.com
  • 验证 stories 中的所有 Storybook 链接插件(例如 LinkTo kind='*')

安装

npm i --save-dev storybook-deadlink-checker

yarn add --dev storybook-deadlink-checker

使用指南

:warning: 当前支持命令行接口(CLI)用法,暂不支持编程接口用法

$ npx storybook-deadlink-checker [dir] [storybook-url] [fileIgnorePattern] [onlyFail]

Options:
  --version                   Show version number                       [boolean]
  --file, --file              file path                                 [string]
  --dir, --directory          directory path                            [string]
  --url, --storybook-url      storybook live or local build url         [string]
  --ignore, --ignore-pattern  ignore pattern                            [string]
  --onlyFail, --only-fail     only show failed links  [boolean] [default: false]
  --help                      Show help                                [boolean]

检查 md 和 mdx 文件中使用的锚点和外部链接

$ npx storybook-deadlink-checker --dir="./path/to/folder"

除了锚点和外部链接外,还检查 Storybook 链接

原理其实很简单。抓取工具会找到 Storybook stories 中所有 <LinkTo kind='*'/>[Link](?path=/docs/*)<a href="?path=/docs/*">Link</a> 标签,并检查这些链接在托管/本地构建的 Storybook 中是否有效。

要验证 Story 链接,你需要一个 Storybook URL。你可以使用在线构建 URL 或本地构建 URL。

对于本地构建 URL,你可以使用以下命令

$ npx build-storybook -o ./local-storybook-build-folder

// then validate the links
$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="file:///${PWD}/local-storybook-build-folder"

对于在线构建 URL,你可以使用以下命令

$ npx start-storybook -p 9009 --no-manager-cache -s public
$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="http://localhost:9009"

仅显示失败的链接

$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="http://localhost:9009" --onlyFail

忽略特殊链接

$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="http://localhost:9009" --ignore="url-pattern-1,url-pattern-2..."

告诉我你的问题

你可以在这里提出任何问题

贡献

欢迎任何 Pull Request。

离开前

如果它对你有用,请给一个Star!:star