简述
NPM 是一个用于 Node.js 的包管理者，它是一个非常有用的工具，为开发者提供了大量的便利。而众所周知的是，前端开发，需要自己创造环境，实时监听代码的变化，并实时地重新编译这些代码并进行打包。Broccoli 在这个领域中作为一个高效快速的前端打包器备受推崇。而 broccoli-sane-watcher 也正是在这样的场景下应运而生。
什么是 broccoli-sane-watcher？
Broccoli 是一款强大的前端打包器，由于它性能高效，速度较快，故在前端领域得到广泛的应用。而 broccoli-sane-watcher 是基于 Broccoli 实现的打包器监听器，它通过监听文件变化，自动触发重新编译操作，从而自动地打包前端工程。
使用教程
安装
Broccoli 需要使用 Node.js 环境，需要先安装 Node.js 和 NPM 工具。然后通过 NPM 安装 broccoli-sane-watcher：
npm i broccoli-sane-watcher --save
配置
在 Broccoli 的 Brocfile.js 中进行配置，并在其中引入 broccoli-sane-watcher。在 Brocfile.js 中添加代码：
const watcher = require('broccoli-sane-watcher');
// 创建 Broccoli 的实例
const brocInstance = someFuncToCreateBrocInstance();
// 使用 broccoli-sane-watcher 来监听变化
module.exports = watcher(brocInstance);编译
通过命令行启动 Broccoli 开始进行编译：
broccoli serve
注意：需要在 Brocfile.js 文件所在的目录下执行该命令。
实例代码
在下面的示例中，我们创建了一个 input 文件夹，其中包含了两个 JavaScript 文件，一个 CSS 文件以及一个 HTML 文件。我们使用 Broccoli 将这里面的内容打包到输出文件夹 output 中，使用 broccoli-sane-watcher 对这些文件进行监听，当源文件发生变化时，自动触发打包操作。
首先，安装 broccoli 和 broccoli-sane-watcher：
npm i --save broccoli broccoli-sane-watcher
接着，在 Brocfile.js 中进行 Broccoli 的配置和 browser-sync 的初始化：
-- -------------------- ---- ------- -- --------- ----- ----------- - --------------------------------- ----- - ------- ------------ ---------- - - -------------------------- -- -- -------- -- ----- ---- - -------------------- ----- ---- - ---------------- ----- -------------- - ------------------ ----- ----------- - ----------------- ----- ---------- - --- ------------ --------------- ----------- -- - ---------- ---- --- -- --- ------------ ------------------ ----- ------ ------------ ----- ------ ------------ - ------------------------ --- ----- --- -- ---- ----- -- -------------- - ------------------------------
然后，我们再创建一个新文件 broc-plugins.js，来引入与我们要用到的插件 broccoli-sass 和 broccoli-typescript-compiler：
-- -------------------- ---- ------- ----- ---- - ------------------------- ----- ---------- - --------------------------------------------------- -- -- ---- -- -------- ---------------- - ------ ------------ ----------- ----------- -- -- -- ---------- -- -------- ----------------- - ------ ----------------- - -- ------- --------- -------- -- -------- ------------ - ------ --- ------------------------- - -------------- - - ------- ------------ ----------- --
最终，我们的目录树大致如下：
-- -------------------- ---- ------- ------------- - ------ - -------- - ------ - ------- - ---------- - ------- - ------------- - ----------- - --------------- - ------------
到此，我们已经成功配置了 broccoli-sane-watcher，这个工具可以自动地监测源文件的变化，并通过 Broccoli 实现自动地打包工程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70210