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 进行安装：
npm install broccoli-kitchen-sink-helpers --save-dev
使用示例
下面是一个简单的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
