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
