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