在前端开发中，我们常常需要读取文件夹中的文件，例如在打包项目时需要读取静态资源文件夹，或者在处理图片资源时需要读取图片文件夹。本文将介绍一个方便快捷的 npm 包 @folder/readdir，它可以用来读取文件夹中的文件，实现对文件夹的快速遍历和操作。
安装
在使用 @folder/readdir 包之前，我们需要先安装它。使用以下命令即可在项目中安装 @folder/readdir：
npm install @folder/readdir
使用方法
@folder/readdir 包提供了一个 readdir 函数，该函数可以用来读取文件夹中的文件。可以传递三个参数：
- 文件夹路径（必选）
- 是否包含子文件夹（可选，默认为 false）
- 文件类型正则表达式（可选）
读取文件夹中的所有文件
以下示例代码展示了如何使用 @folder/readdir 包读取文件夹中的所有文件：
-- -------------------- ---- -------
----- - ------- - - ---------------------------
-------------------
------------- -- -
-------------------
--
------------ -- -
-------------------
---上述代码中，我们传递了文件夹路径 "./static"，readdir 函数会返回一个 Promise 对象，该对象的 then 方法中包含了读取到的所有文件名。
读取文件夹中的特定类型文件
如果我们只需要读取文件夹中的某一特定类型的文件，可以传递第三个参数，正则表达式，来获取特定类型的文件。以下示例代码展示了如何读取文件夹中的 js 文件：
-- -------------------- ---- -------
----- - ------- - - ---------------------------
---------------- ------ --------
------------- -- -
-------------------
--
------------ -- -
-------------------
---上述代码中，我们传递了文件夹路径 "./src"，第二个参数 false 表示不包含子文件夹，第三个参数 /.js$/ 表示读取 js 文件。
读取文件夹中的所有文件，包括子文件夹
如果我们需要读取文件夹下的所有文件，包括子文件夹中的文件，可以传递第二个参数为 true。以下示例代码展示了如何读取文件夹下所有文件：
-- -------------------- ---- -------
----- - ------- - - ---------------------------
---------------- -----
------------- -- -
-------------------
--
------------ -- -
-------------------
---上述代码中，我们传递了文件夹路径 "./src"，第二个参数为 true，表示包含子文件夹中的所有文件。
学习意义
@folder/readdir 包提供了快速读取文件夹中的文件的方法，方便了我们在前端开发中操作文件夹。同时，本文还介绍了如何使用正则表达式来筛选特定类型的文件，以及如何读取子文件夹中的所有文件。掌握这些技巧，我们可以更加方便快捷地处理文件夹中的文件，提高前端开发效率。
指导意义
@folder/readdir 包提供了读取文件夹中的文件的方法，可以方便地应用在前端开发中。同时，本文还介绍了如何使用正则表达式筛选特定类型的文件和如何读取子文件夹中的所有文件，这两个技巧也是我们在前端开发中常常需要用到的。掌握这些技巧，我们可以更加高效地处理文件夹中的文件，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbf7bb5cbfe1ea0611c00