在前端开发中，我们经常需要使用各种 npm 包来帮助我们完成某些功能。今天我们要介绍的是 metalsmith-unlisted 这个 npm 包，它可以帮助我们快速将特定文件夹中的文件排除在生成的页面之外，为我们的代码优化和性能提升提供了很大的帮助。
安装和使用
首先我们需要在项目中安装 metalsmith-unlisted，使用以下命令：
npm install metalsmith-unlisted --save-dev
安装完成之后，我们需要在项目的 metalsmith.js 文件中引入它：
const unlisted = require('metalsmith-unlisted');
然后，我们在 Metalsmith 的配置文件中使用它：
-- -------------------- ---- ------- --------------------- -------------- -- ---- --------------------- -- ----- --------------- ---------------------- -------------------------- --- ------------ ------ -- - -- ----- - ----- ---- - ---展开代码
以上代码中，exclude/this/folder 表示排除 src/exclude/this/folder 文件夹中所有的文件，exclude/that/folder/**/* 表示排除 src/exclude/that/folder 文件夹及其任何子文件夹中的所有文件。
深入解析
Metalsmith 是一个静态网站生成器，它允许开发者使用自己的喜好和方法构建网站。它为用户提供了非常强大的 API，允许用户使用自己喜欢的方式加载不同的插件来完成不同的任务。
metalsmith-unlisted 的作用是排除特定文件夹中的文件。它的源码仅仅只有4行 JavaScript 代码：
-- -------------------- ---- ------- ----- --------- - --------------------- -------------- - ------------------ - ------ --------------- ----------- ----- - --- ---- -------- -- ------ - --- ---- - - -- - - ---------------- ---- - -- -------------------- ------------- - ------ ---------------- ------ - - - ------- - --展开代码
可以看到，整个插件都是围绕着一个迭代器进行的，这是 fn => files => fn(files, ...args) 这个通用模式的一个很好的示例。
示例
为了理解这个插件的具体使用方法，我们举一个例子。
我们要在一个由 Metalsmith 构建的网站中排除掉名为 test 的文件夹中的一些文件。首先我们创建一个新的文件夹 test，并在其中新建两个文件 1.txt 和 2.txt。
然后我们需要在生成网站的配置文件 metalsmith.js 中添加排除规则：
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- -------- - ------------------------------- --------------------- ---------------- ----------------------- --------------- ----------- --- ------------ -- - -- ----- - ----- ---- - ---展开代码
在我们的代码中添加了 .use(unlisted([ 'test/**/*' ])) 代码，表示建立了一个名为 test 的文件夹，并且删除了该文件夹中所有文件的输出。
结论
总之，metalsmith-unlisted 是一个非常有用的 npm 包。它可以帮助我们快速进行文件过滤，提高我们的代码性能，是前端开发中不可或缺的一个工具。希望这篇介绍能够帮助你更好地应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f421d8e776d08040e04
