随着现代 web 技术的不断发展，前端开发也变得越来越复杂，对于一个项目来说，可能会有大量的 JavaScript 和 CSS 文件，而这些文件往往需要被合并、压缩等操作，为了方便开发者的处理，出现了很多 npm 包来帮助我们完成这些操作。
其中一个常用的 npm 包就是 walkdirp。这个 npm 包可以以树形结构遍历指定文件夹下的所有文件，并返回这些文件的相对路径，非常适合在自动化构建项目时使用。
下面，我们就来详细了解一下 walkdirp 的使用教程。
安装
安装 walkdirp 非常简单，只需要在命令行中输入以下命令即可：
npm install walkdirp
示例代码
我们可以通过以下代码来遍历指定目录下的所有文件：
const walk = require('walkdirp');
walk('./path/to/directory', (filepath, folderStats) => {
console.log(filepath);
});在这段代码中，我们通过 require() 引入了 walkdirp 模块，并使用 walk() 方法来遍历指定目录。walk() 方法接受两个参数，第一个参数是要遍历的目录的路径，第二个参数是回调函数，在遍历目录的过程中会调用该函数。
在回调函数中，我们可以拿到两个参数，第一个参数 filepath 表示当前遍历到的文件的相对路径，第二个参数 folderStats 表示当前遍历到文件所在的文件夹的信息。
通过以上代码，我们就可以输出指定目录下的所有文件的路径。
高级使用
除了以上的基本使用方法，walkdirp 还提供了一些高级的功能，让我们可以更加方便地处理文件。
排除指定目录或文件
在遍历目录时，我们可能需要排除某些目录或文件，可以通过 ignore 选项来实现。例如，我们想要排除所有以 .git 开头的文件或文件夹，可以这样写：
const walk = require('walkdirp');
walk('./path/to/directory', {
ignore: (fileName, folderInfo) => fileName.startsWith('.git')
}, (filepath, folderStats) => {
console.log(filepath);
});在上面的代码中，我们在 walk() 方法的第二个参数中传入了一个 options 对象，并设置了 ignore 选项为一个回调函数。这个回调函数有两个参数，第一个参数表示当前文件或文件夹的名称，第二个参数表示当前文件或文件夹所在的文件夹的信息。在回调函数中，我们通过 startsWith() 方法来判断当前的文件或文件夹是否以 .git 开头，并通过返回值来决定是否排除该文件或文件夹。
除了 startsWith() 方法，我们还可以使用正则表达式来筛选需要排除的文件或目录。
并行处理文件
walkdirp 默认是串行依次处理每个文件，但是在某些情况下，我们可能需要并行处理所有文件，这个时候，我们可以通过设置 concurrency 选项来实现。例如，我们想要同时处理 10 个文件，可以这样写：
const walk = require('walkdirp');
walk('./path/to/directory', {
concurrency: 10
}, (filepath, folderStats) => {
console.log(filepath);
});在上面的代码中，我们在 walk() 方法的第二个参数中设置了 concurrency 选项为 10，意味着最多同时处理 10 个文件。
深度优先遍历
默认情况下，walkdirp 是按照广度优先遍历的方式来遍历文件，但是在某些情况下，我们可能需要按照深度优先的方式遍历文件，可以通过设置 strategy 选项来实现。例如，我们想要使用深度优先的方式遍历文件夹，可以这样写：
const walk = require('walkdirp');
walk('./path/to/directory', {
strategy: 'depth'
}, (filepath, folderStats) => {
console.log(filepath);
});在上面的代码中，我们在 walk() 方法的第二个参数中设置了 strategy 选项为 depth，意味着使用深度优先的遍历方式。
总结
使用 walkdirp 可以让我们更加方便地处理文件，并可以非常灵活地根据不同的需求来进行高级的配置。在实际的项目中，walkdirp 可以帮助我们自动化地处理大量的文件，节省开发时间，提高效率，因此我们建议学习和掌握 walkdirp 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb281e8991b448dc556