TypeScript ES6-Promise 遞歸遍歷文件夾中的文件

貌似很多人都愛用這個作為寫文章的初嘗試，那來吧。
遍歷文件夾下的所有文件，如遍歷文件夾下並操作HTML/CSS/JS/PNG/JPG步驟如下：
1、傳入一個路徑，讀取路徑里面所有的文件；
2、遍歷讀取的文件，判斷當前文件是文件還是文件夾；
3、if: 前目錄為文件，輸出當前文件絕對路徑，return；
4、else: 當前目錄為文件夾，獲取文件夾路徑，繼續遞歸遍歷該文件夾下的文件；
5、直至遍歷完目錄中的所有文件為止。

常規實現之Code：

import * as fs from 'fs';  
import * as path from 'path'; // 導入fs庫和path庫，哪里來的？npm, yarn了解一下

/**
 * @description
 * path.resolve(...pathSegments: string[]): string
 * @param 參數是一串字符串，返回一個絕對路徑
 * 比如 path.resolve(`${__dirname}`, '../../assets')
 * __dirname是nodejs下的一個全局變量，可以獲得當前文件所在目錄的完整目錄名
 * 相當於從當前文件的目錄 cd ../../assets/，獲取這個assets目錄的絕對路徑
 */
const dirPath = path.resolve(`${__dirname}`, '../../assets/');

fileDisplay(dirPath);

/**
 * 文件遍歷方法
 * @param filePath 需要遍歷的文件路徑
 */
function fileDisplay(filePath: string) {
  // 根據文件路徑讀取文件，返回一個文件列表
  fs.readdir(filePath, (err, files) => {
    if (err) {
      console.warn(err);
      return;
    }
    // 遍歷讀取到的文件列表
    files.forEach(filename => {
      // path.join得到當前文件的絕對路徑
      const filepath = path.join(filePath, filename);
      // 根據文件路徑獲取文件信息
      fs.stat(filepath, (error, stats) => {
        if (error) {
          console.warn('獲取文件stats失敗');
          return;
        }
        const isFile = stats.isFile(); // 是否為文件
        const isDir = stats.isDirectory(); // 是否為文件夾
        if (isFile) {
          console.log(filepath); //如果是文件，輸出它的路徑咯～
        }
        if (isDir) {
          fileDisplay(filepath); // 遞歸，如果是文件夾，就繼續遍歷該文件夾里面的文件；
        }
      });
    });
  });
}

ES6-Promise實現

假如您了解ES6之Promise，就可以拒絕這種回調地獄了，因為回調嵌套大量縮進會有不少缺點：難以復用、借助外層變量...
那我們就可以進階了哦，究極進化：

// 讀取文件的邏輯拉出
function fsReadDir(dir: string) {
  return new Promise<string[]>((resolve, reject) => {
    fs.readdir(dir, (err, files) => {
      if (err) reject(err);
      resolve(files);
    });
  });
}
// 獲取fs.stats的邏輯拉出
function fsStat(path: string) {
  return new Promise<fs.Stats>((resolve, reject) => {
    fs.stat(path, (err, stat) => {
      if (err) reject(err);
      resolve(stat);
    });
  });
}
// 搜索文件主方法
async function fileSearch(dirPath: string) {
  const files = await fsReadDir(dirPath);
  const promises = files.map(file => {
    return fsStat(path.join(dirPath, file));
  });
  const datas = await Promise.all(promises).then(stats => {
    for (let i = 0; i < files.length; i += 1) files[i] = path.join(dirPath, files[i]);
    return { stats, files };
  });
  datas.stats.forEach(stat => {
    const isFile = stat.isFile();
    const isDir = stat.isDirectory();
    if (isDir) {
      fileSearch(datas.files[datas.stats.indexOf(stat)]);
    }
    if (isFile) console.log(datas.files[datas.stats.indexOf(stat)]);
  });
}

以上為Promise簡單實現，便於新人閱讀理解Promise的優點，更多Promise的深層實現請參考阮一峰老師的大全ECMAScript 6 入門，那么這篇文章就先結束了，但這不是全部。程序之路，漫漫，共勉。

來源：https://segmentfault.com/a/1190000016841072