如何在Docsify插件中读取应用根目录的文件夹及文件内容？

浏览器端JavaScript受安全策略限制，无法直接访问用户本地文件系统的目录和文件，以下是适配Docsify场景的可行方案：

问题1：读取应用根目录文件夹并获取文件名 #

方案A：前置Node.js构建脚本（适合本地开发/静态部署） #

在启动Docsify前，用Node.js遍历目标目录，生成包含文件列表的JSON文件，插件再加载这个文件获取文件名：

// build-file-list.js（Node.js脚本）
const fs = require('fs');
const path = require('path');

const targetFolder = './targetJSFolder';
fs.readdir(targetFolder, (err, files) => {
  if (err) throw err;
  // 过滤出.js/.html文件
  const validFiles = files.filter(file => /\.(js|html)$/.test(file));
  fs.writeFileSync('./docs/file-list.json', JSON.stringify(validFiles));
});

运行脚本后，Docsify插件通过fetch加载./docs/file-list.json就能拿到文件名列表。

方案B：使用File System Access API（纯客户端，需用户主动授权） #

让用户手动选择目标文件夹，通过浏览器的File System Access API获取文件列表：

async function loadFolderFiles() {
  const dirHandle = await window.showDirectoryPicker();
  const files = [];
  for await (const entry of dirHandle.values()) {
    if (entry.kind === 'file' && /\.(js|html)$/.test(entry.name)) {
      files.push(entry.name);
    }
  }
  // files数组即为目标文件名列表
  return files;
}

问题2：读取文件内容转为字符串 #

对应方案A：构建脚本同步读取文件内容 #

在Node.js脚本中直接读取文件内容，提前处理注释并生成Markdown片段：

// build-file-list.js 扩展
const fs = require('fs');
const path = require('path');

const targetFolder = './targetJSFolder';
fs.readdir(targetFolder, (err, files) => {
  if (err) throw err;
  const docsContent = {};
  files.forEach(file => {
    if (/\.(js|html)$/.test(file)) {
      const content = fs.readFileSync(path.join(targetFolder, file), 'utf8');
      // 这里调用你的注释提取逻辑处理内容
      docsContent[file] = extractTaggedComments(content);
    }
  });
  fs.writeFileSync('./docs/generated-docs.json', JSON.stringify(docsContent));
});

function extractTaggedComments(content) {
  // 你的注释提取逻辑，比如正则匹配
  const commentRegex = /\/\*\*([\s\S]*?)\*\//g;
  const matches = content.match(commentRegex) || [];
  return matches.map(comment => comment.replace(/\/\*\*|\*\//g, '').trim());
}

对应方案B：通过File System Access API读取文件内容 #

拿到文件句柄后直接读取内容，客户端处理：

async function readFileContent(fileHandle) {
  const file = await fileHandle.getFile();
  const content = await file.text();
  // 调用你的注释提取逻辑
  return extractTaggedComments(content);
}

// 结合之前的loadFolderFiles使用
async function processFolder() {
  const dirHandle = await window.showDirectoryPicker();
  const results = {};
  for await (const entry of dirHandle.values()) {
    if (entry.kind === 'file' && /\.(js|html)$/.test(entry.name)) {
      results[entry.name] = await readFileContent(entry);
    }
  }
  // 处理后的结果可直接用于生成Docsify文档
  return results;
}

适配你的目标功能代码 #

调整后的客户端处理版本示例：

const Functions = {
  async folderProcessor() {
    const dirHandle = await window.showDirectoryPicker();
    const files = [];
    for await (const entry of dirHandle.values()) {
      if (entry.kind === 'file' && /\.(js|html)$/.test(entry.name)) {
        files.push(entry);
      }
    }
    const allComments = {};
    for (const file of files) {
      const content = await file.getFile().then(f => f.text());
      allComments[file.name] = Functions.extractTaggedComments(content);
    }
    return allComments;
  },
  extractTaggedComments(content) {
    const commentRegex = /\/\*\*([\s\S]*?)\*\//g;
    const matches = content.match(commentRegex) || [];
    const result = {};
    matches.forEach(comment => {
      const cleaned = comment.replace(/\/\*\*|\*\//g, '').trim();
      // 假设注释里有@tag这样的标签
      const tagMatch = cleaned.match(/@(\w+)/);
      if (tagMatch) {
        const tag = tagMatch[1];
        result[tag] = cleaned;
      }
    });
    return result;
  },
  createMDFile(extractedComments) {
    let mdText = '';
    Object.entries(extractedComments).forEach(([fileName, tags]) => {
      mdText += `## ${fileName}\n`;
      Object.entries(tags).forEach(([tag, content]) => {
        mdText += `### ${tag}\n${content}\n\n`;
      });
    });
    return mdText;
  }
};

避免服务器存储的说明 #

• 若用方案B（File System Access API）：所有处理都在客户端完成，不需要上传文件或存储到服务器，生成的Markdown可直接在Docsify页面渲染。
• 若用方案A（构建脚本）：生成的JSON/MD文件是静态资源，可直接放入Docsify的docs目录，本地预览或静态部署都不需要额外服务器存储逻辑。

内容的提问来源于stack exchange，提问作者The Jaded George