Storybook 死链接检查器
一个轻量级的 Storybook 插件,用于验证 Storybook 故事中失效链接,其中链接是使用 @storybook/addon-links 包创建的。
亮点
- 支持 node v8.x 及以上版本
- 验证故事中的所有锚点/内部链接(例如:#my-link)
- 验证故事中的所有外部链接(例如:https://my-link.com)
- 验证故事中的所有 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 故事中查找所有 <LinkTo kind='*'/>
、[Link](?path=/docs/*)
和 <a href="?path=/docs/*">Link</a>
标签,并检查这些链接在托管/本地 Storybook 构建中是否有效。
要验证 Storybook 链接,您需要提供一个 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="https://127.0.0.1:9009"
仅显示失效链接
$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="https://127.0.0.1:9009" --onlyFail
忽略特殊链接
$ npx storybook-deadlink-checker --dir="./path/to/folder" --url="https://127.0.0.1:9009" --ignore="url-pattern-1,url-pattern-2..."
告诉我您的问题
您可以在 此处 提出任何问题
贡献
欢迎任何 Pull Request。
在您离开之前
如果它对您有用,请给一个 Star! :star