在前端项目中，构建过程是一项必要的工作，其中包括了将源代码转换成与生产环境相关的代码。在这个过程中，需要使用一些构建工具来处理这些操作。而 Broccoli 就是一个非常流行的构建工具，它支持打包、压缩和转换文件等操作。
在 Broccoli 中，有一个非常重要的概念：Tree。Tree 是指一个目录或者是一个文件的集合，而 Broccoli 对 Tree 进行操作，来生成前端项目需要的文件。
broccoli-unwatched-tree 就是一个非常实用的 npm 包，它可以将一个普通的目录转化为 Broccoli 可以操作的目录。在这篇文章中，我们将详细介绍 broccoli-unwatched-tree 的用法，包括其安装、配置和使用等方面的内容。
安装
在开始使用 broccoli-unwatched-tree 之前，我们需要先将它安装到我们的项目中。使用以下命令即可完成安装：
--- ------- ----------------------- ----------
这里我们使用 npm 来进行安装。建议将其安装到 devDependencies 中，因为它仅用于开发环境中，而不应该出现在生产环境中。
配置
安装完成之后，我们需要在 Broccoli 的配置文件中引入它，以便在项目中使用。假设我们的 Broccoli 配置文件为 Brocfile.js，那么我们可以在该文件中进行如下配置：
--- ------------- - ----------------------------------- --- ------ - ----------------------------- -------------- - -------------------
这里我们使用 require 引入了 broccoli-unwatched-tree，并在 Brocfile.js 中创建一个目录树（my-folder），并将其传入到 somePlugin 插件中进行操作。
需要注意的是，broccoli-unwatched-tree 仅支持传入一个目录，不支持传入多个目录。
使用示例
了解了 broccoli-unwatched-tree 的基本配置之后，我们可以尝试使用它。以下是一个示例代码，它可以将一个目录下的所有 .md 文件转化为 .html 文件，并添加一个简单的样式。
--- ------------- - -----------------------------------
--- ------------ - --------------------------------------
--- ------ - ---------------------------
--- ------ - ---------------------------
--- ----------- - -------------------------------------
--- ---------- - --------------------------------
-- ------------------
-------- ----------------- -
------ -------------------------------- - -- -----------------------
-
-- -- ------------
--- ------ - --- ---------------------------------------- -
----------- -------
--------------------- ------
---
-- - ------------ --- ----
--- -------- - --- -------------- -
------------------- ---------------------- -
------ ------------------------------------
-
---
-- ----
--- ---- - ------------------------- ------------ ------------
-- -- ------ -- ---- - ---
--- ---------- - --- ---------------------------- ------- -
----------- ---------- ---------
----------- -------------
---
-------------- - -----------在这个示例代码中，我们首先使用 MarkdownTree 将 ./content 目录下的所有 .md 文件转化为 .html 文件。然后，我们使用 Funnel 来重命名这些文件，将其名称改为去掉扩展名的文件名，并将其后缀名改为 .html。接下来，我们使用 broccoli-sass-source-maps 将 ./styles 目录下的 .scss 文件转化为 .css 文件，并使用 Concat 合并所有的 .html 和 .css 文件生成最终的 index.html 文件。
结论
在使用 Broccoli 进行前端项目构建时，broccoli-unwatched-tree 是一个非常实用而且简单易用的 npm 包。它可以将普通的目录转化为 Broccoli 可以操作的目录，使得开发者可以更加方便地进行构建和操作。在我们的示例代码中，我们使用 broccoli-unwatched-tree 将 .md 文件转化为 .html 文件，并将其与 .css 文件合并生成一个简单的静态网站。当然，在实际项目中，我们可以使用更加复杂的操作来处理我们的源代码。不过，在进行这些操作之前，我们需要了解并掌握 broccoli-unwatched-tree 的使用方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c89ccdc64669dde5194