Storybook Deadlink Checker

一个轻量级的 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