broccoli-kitchen-sink-helpers 是一个npm包，用于简化构建Broccoli.js项目的工具集。本文将介绍这个工具集的使用方法、深度技术以及指导意义，并且提供示例代码。
Broccoli.js 简介
Broccoli.js是一个JavaScript构建工具，它允许您编写自定义构建流程来处理静态资源（如HTML文件、CSS文件和JavaScript文件）。通过将从输入目录中读取的文件流传递给一系列转换器，然后将结果流传递给输出目录，可以动态地生成最终资源。
Broccoli.js具有以下特点：
- 快速：Broccoli.js可以快速重建项目并在开发过程中实时更新。
- 灵活性：您可以使用任何JavaScript库、框架或插件来扩展Broccoli.js。
- 可定制性：您可以编写自己的Broccoli.js插件来满足您的特定需求。
broccoli-kitchen-sink-helpers 介绍
broccoli-kitchen-sink-helpers 是一个npm包，它提供了一组Broccoli.js插件和帮助函数，使项目构建变得更加容易。
该包的主要特点是：
- 提供了各种常见功能的 Broccoli 插件，如 CSS 预处理、语言转译等。
- 帮助函数可以更容易地编写自定义 Broccoli 插件。
broccoli-kitchen-sink-helpers 使用方法
安装
使用 npm 进行安装：
--- ------- ----------------------------- ----------
使用示例
下面是一个简单的Broccoli.js示例，它使用 broccoli-kitchen-sink-helpers 来转译TypeScript和Sass文件。
--- ----------------- - ------------------------------------------------ --- ----------- - ------------------------------------------------- ----------- ----------- --- ---------- - -------------------------------- --- ------- - ------ ------- - -------------------------- - --------- --------------- --- ------- - --------------------- -------------- - ----------------------
在这个示例中，我们首先将输入目录指定为源代码目录（src），然后通过 TypeScript Compiler 和 Sass Source Maps 这两个 Broccoli 插件来转换 src 目录中的 TypeScript 和 Sass 文件。最后，我们使用 broccoli-merge-trees 将输出目录树合并为一个单独的目录树，并将其导出作为Broccoli.js构建的结果。
聚焦深度技术
自定义插件
除了使用 broccoli-kitchen-sink-helpers 提供的常规插件之外，您还可以编写自己的自定义插件。
以下是一个简单的自定义插件示例，它将输入目录中的所有JavaScript文件转换为ES5代码：
----- ----- - -------------------------------------
----- ------ - ---------------------------
----- ---------- - --------------------------------
----- ------------- -
---------------------- -------- -
-------------- - ----------
------------ - ------- -- ---
-
-- ------- -- ----- -- ----- ---- ------ -- ------- --- -------
----------------- -
------ -----------------
-
-- --------- ------ ----
----- ------- -
--- ------ - --- ---------------------- - -------- ----------- ---
------ - --- ------------- -
-------- ---------------
----------- --------
---
------ -------
-
-
-------------- - --------------这个插件使用 broccoli-funnel 将输入目录中的 JavaScript 文件过滤出来，然后使用
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/53904