React应用构建时死链检测与拼写错误排查方案咨询

一、链接有效性校验（检测404错误） #

以下两款JavaScript工具支持直接指定应用URL进行全站爬取校验：

• broken-link-checker：命令行工具，支持递归爬取、自定义请求头，适配React单页应用的客户端路由。CI中执行命令：

  blc https://your-react-app-url.com -ro
  

  -ro参数限制只检查同源链接，避免不必要的外部站请求，工具会返回所有无效链接的状态码，CI可根据返回值判断步骤是否失败。
• LinkChecker CLI：轻量JS工具，专注链接有效性检测，支持配置超时、忽略特定链接规则。执行命令：

  link-checker https://your-react-app-url.com --ignore-urls "https://example.com/*"
  

二、全站文本拼写检查 #

推荐结合爬虫与拼写检查的方案，均为JavaScript生态工具：

• spellchecker-cli + 递归爬取：直接通过URL爬取全站文本并检查拼写，支持自定义词库（适配项目专业术语）。CI执行命令：

  spellchecker --url https://your-react-app-url.com --recursive --dictionary ./custom-words.txt
  

• Puppeteer + cspell：适合复杂单页应用，先用Puppeteer模拟浏览器渲染React页面，提取所有文本内容，再用cspell做拼写检查。示例脚本片段：

  const puppeteer = require('puppeteer');
  const cspell = require('cspell');
  
  async function checkSpelling(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const pageText = await page.evaluate(() => document.body.innerText);
    const results = await cspell.checkText(pageText, { dictionaryPaths: ['./custom-words.txt'] });
    console.log('拼写错误:', results);
    await browser.close();
    return results.length === 0;
  }
  
  checkSpelling('https://your-react-app-url.com').then(pass => process.exit(pass ? 0 : 1));
  

  CI中执行该脚本，通过退出码判断步骤是否通过。

CI集成注意事项 #

• 确保React应用在CI环境已启动（或直接使用生产环境URL），对于客户端渲染的路由，需选择支持JS渲染的工具（如Puppeteer配合的方案）。
• 可根据项目需求配置工具的忽略规则、超时时间等参数，避免误判。

内容的提问来源于stack exchange，提问作者jwa