温馨提示： 如果只是使用建议直接看第四点代码封装

一、逻辑介绍

1. 主要是使用 node 的 fs 模块
2. 使用 fs.readdir() 方法根据文件路径去读取文件，然后返回文件列表（此处包含文件夹和文件）
3. 然后我们通过 fs.stat() 去判断是否是文件、文件夹。如果是文件夹则递归执行，否则 跳出递归。
4. 文件名字能获取（filename），绝对地址也能获取到（filePath），咱们需要拼接，所以我们引入 path 模块进行拼接
5. 最后就可以自己通过字符串的 replace 方法来进行抽离出自己想要的路径了

二、基础代码

// node fs模块
const fs = require('fs');
// node path模块
const path = require('path');
// 被读取的文件夹地址
const filePath = path.resolve('./generators/app/templates');
// 收集所有的文件路径
const arr = [];
const fileDisplay = filePath => {
  //根据文件路径读取文件，返回文件列表
  fs.readdir(filePath, function (err, files) {
    if (err) return console.error('Error:(spec)', err)
    files.forEach((filename) => {
      //获取当前文件的绝对路径
      const filedir = path.join(filePath, filename);
      // fs.stat(path)执行后，会将stats类的实例返回给其回调函数。
      fs.stat(filedir, (eror, stats) => {
        if (eror) return console.error('Error:(spec)', err);
        // 是否是文件
        const isFile = stats.isFile();
        // 是否是文件夹
        const isDir = stats.isDirectory();
        if (isFile) {
          // 这块我自己处理了多余的绝对路径，第一个 replace 是替换掉那个路径，第二个是所有满足\\的直接替换掉
          arr.push(filedir.replace('D:\\lh\\study\\jiaoshoujia\\vue\\generator-lh-vue\\generators\\app\\', '').replace(/\\/img, '/'))
          // 最后打印的就是完整的文件路径了
          console.log(arr, 'arr')
        }
        // 如果是文件夹
        if (isDir) fileDisplay(filedir);
      })
    });
  });
}
fileDisplay(filePath);

成功示例

三、一些问题

1. 最终结果会在小黑框里面打印出来，但是有点不美观，因为会出现 arr 的 push 过程
   （1）解决方案：使用防抖的方式，添加 timer；

	// node fs模块
const fs = require('fs');
// node path模块
const path = require('path');
// 被读取的文件夹地址
const filePath = path.resolve('./generators/app/templates');
// 收集所有的文件路径
const arr = [];
// 防抖：保存定时器名字
let timer = null;
const fileDisplay = filePath => {
  //根据文件路径读取文件，返回文件列表
  fs.readdir(filePath, (err, files) => {
    if (err) return console.error('Error:(spec)', err)
    files.forEach((filename) => {
      //获取当前文件的绝对路径
      const filedir = path.join(filePath, filename);
      // fs.stat(path)执行后，会将stats类的实例返回给其回调函数。
      fs.stat(filedir, (eror, stats) => {
        if (eror) return console.error('Error:(spec)', err);
        // 是否是文件
        const isFile = stats.isFile();
        // 是否是文件夹
        const isDir = stats.isDirectory();
        if (isFile) {
          // 这块我自己处理了多余的绝对路径，第一个 replace 是替换掉那个路径，第二个是所有满足\\的直接替换掉
          arr.push(filedir.replace('D:\\lh\\study\\jiaoshoujia\\vue\\generator-lh-vue\\generators\\app\\', '').replace(/\\/img, '/'))
          // 最后打印的就是完整的文件路径了
          // 此处添加防抖操作
          if (timer) clearTimeout(timer)
          timer = setTimeout(() => console.log(arr, 'arr'), 200)
          // -------------
        }
        // 如果是文件夹
        if (isDir) fileDisplay(filedir);
      })
    });
  });
}
fileDisplay(filePath)

四、最终代码封装

/**
 * fileDisplay(url, callback)
 * @param url: 你即将读取的文件夹路径
 * @param callback: 回调函数
 */

// node fs模块
const fs = require('fs');
// node path模块
const path = require('path');
// 收集所有的文件路径
const arr = [];
let timer = null;
const fileDisplay = (url, cb) => {
  const filePath = path.resolve(url);
  //根据文件路径读取文件，返回文件列表
  fs.readdir(filePath, (err, files) => {
    if (err) return console.error('Error:(spec)', err)
    files.forEach((filename) => {
      //获取当前文件的绝对路径
      const filedir = path.join(filePath, filename);
      // fs.stat(path)执行后，会将stats类的实例返回给其回调函数。
      fs.stat(filedir, (eror, stats) => {
        if (eror) return console.error('Error:(spec)', err);
        // 是否是文件
        const isFile = stats.isFile();
        // 是否是文件夹
        const isDir = stats.isDirectory();
        if (isFile) {
          // 这块我自己处理了多余的绝对路径，第一个 replace 是替换掉那个路径，第二个是所有满足\\的直接替换掉
          arr.push(filedir.replace(__dirname, '').replace(/\\/img, '/'))
          // 最后打印的就是完整的文件路径了
          if (timer) clearTimeout(timer)
          timer = setTimeout(() => cb && cb(arr), 200)
        }
        // 如果是文件夹
        if (isDir) fileDisplay(filedir, cb);
      })
    });
  });
}
// 测试代码
fileDisplay('./src', (arr) => {
  console.log(arr, '-=')
})
// commonjs规范
module.exports = fileDisplay;
// es6 规范
// export default fileDisplay

五、原因

1. 学习脚手架搭建，里面有文件路径模板拷贝（坑货老师直接复制粘贴，内容为本文的这个数组）；
2. 本文项目模板文件地址；如果克隆得切换分支为 template；master是我的一个毕业设计项目，template为模板