在前端开发过程中，我们经常需要将源文件转换为可部署的代码。这种转换可以通过构建工具完成，而Broccoli是一种流行的构建工具之一。Broccoli的默认行为是每次都重新构建整个项目，这样可能会浪费很多时间和资源。幸运的是，npm包broccoli-caching-writer可以帮助我们缓存构建结果，从而提高构建速度。
本文将介绍如何使用broccoli-caching-writer，以及如何优化构建过程并减少重复构建的次数。
前置条件
确保您的系统中安装了以下软件：
- Node.js
- Broccoli
安装Broccoli-caching-writer
要开始使用Broccoli-caching-writer，请先在您的项目目录中打开终端并输入以下命令：
npm install --save-dev broccoli-caching-writer
安装完成后，您就可以在您的项目中使用Broccoli-caching-writer了。
使用Broccoli-caching-writer
Broccoli-caching-writer中最重要的两个函数是cacheKeyProcessString和build。其中cacheKeyProcessString用于生成一个唯一的缓存键，而build函数则定义了如何将源文件转换为目标文件。
让我们看一个示例，假设我们有一个非常简单的JavaScript模块，它将传递给它的数字加1，并将结果输出到控制台：
// source.js
export default function addOne(num) {
const result = num + 1;
console.log(`Result: ${result}`);
}我们可以使用Broccoli-caching-writer将此模块转换为一个CommonJS模块，如下所示：
-- -------------------- ---- -------
-- ---------------
----- - ------------- - - -----------------------------------
----- ---- - ----------------
----- -- - --------------
----- ----------- ------- ------------- -
----------------------- -------- -
----------------- -
-----------
----- ---------------
---
-
-------------------------- -
------ --- - ---------------
-
----- ------- -
----- --------- - -------------------
----- ---------- - ----------------
----- -------------- - -------------------- -------------
----- ------------------- - --------------------- ------------------
----- ------- - ------------------------------- --------
----- ------------------ - --------------- - -------- ----- -
----------
----
------------------------------------- --------------------
-
-
-------------- - ---------------------------让我们逐行分析一下MyTransform类的代码：
- 第1-3行导入了Broccoli-caching-writer、path和fs库。
- 第5-12行定义了名为
MyTransform的类，它扩展了Broccoli-caching-writer的CachingWriter类。 - 第14-17行重写了父级构造函数，将选项对象中的name属性设置为'my-transform'，以便在构建日志中正确显示名称。
- 第19-23行重写了
cacheKeyProcessString函数，并返回一个字符串，该字符串唯一地标识了当前输入文件的组合。如果在下一次构建中输入文件没有更改，则可以使用缓存结果，从而提高构建速度。 - 第25-35行是最重要的
build函数。它将源文件读取为字符串，然后将其转换为CommonJS模块格式，并将结果写入目标文件中。
现在我们已经定义了自己的Broccoli转换器，让我们将其添加到Broccoli配置中：
// Brocfile.js
const MyTransform = require('./my-transform');
module.exports = new MyTransform('src')这个简单的例子只有一个输入节点'src'，因此我们可以直接在构造函数中传递该节点的名称。但是，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/53929