前言
在前端开发中，构建工具是必不可少的一部分。而 Broccoli-Timepiece 正是一个基于 Broccoli 的构建工具，专为实现静态资源版本控制而设计。本文将介绍如何使用该工具，以便更好地管理和维护项目。
安装
使用 npm 进行安装：
--- - -- ------------------
使用说明
API
Timepiece
new Timepiece(inputNode: BroccoliNode, options: BroccoliTimepieceOptions)
选项：
versionsDir：存放版本信息的目录，相对于 Broccoli 输出目录的路径，默认为./versions。getVersionKey(fileName: string, hash: string): string：通过文件名和哈希值生成版本号的函数，默认为(fileName, hash) =>${fileName}-${hash}``。online：boolean：是否将版本控制输出到 JS 文件中，默认为false。
示例代码：
----- --------- - -----------------------------
-------------- - -------- ------- -
------ --- ---------------- -
------------ --------
-------------- ---------- ----- -- ----------
------- -----
--
-命令行工具
--------- --------- --------- --------- ---- ------- ------- -- ------------------ ---- ---- --------------- ------- ---- ---- ----------------- -------- --- ------ --------------- --- ------ ---- ---------- ---- -------- ---------------------- -- ---
示例
在这个示例中，我们会构建一个简单的前端项目，并使用 Broccoli-Timepiece 进行版本控制。
目录结构
- --- --- - --- ---------- - --- -------- - --- ------- --- ----------- --- ------------
安装依赖
--- - -- -------- -------------------- ------------------ ------------- ------------------------ ------------------
Brocfile.js
----- ---------- - -------------------------------
----- ---------------- - -----------------------------
----- ------------ - ------------------------------------
----- -------------- - -----------------------------------------
----- - ---- - - ---------------
----- - ----------- - - -------------
----- -------------- - -----------------------------------
----- --------- - -----------------------------
----- ------- - --------------------- -
-------- --
--
----- ------- - --- --------------------- ------------ ----------- -
---------- -----
------------------ -----
------------ -----------
--
----- ------ - --- ----------------------- -
------- ----------
--
----- --------- - ------------------------
----- -------- - --- ----------------------
--------
--------
-------
--- -
------- -----
--
-------------- - --------index.html
--------- -----
----- -------------
------
----- ----------------
------------------------- ------------
----- ---------------- ----------- ---------------
-------
------
---- ------------------
---------- -----------
------
------- ---------- -----------------------
-------
-------其中，使用 {{url}} 标记标签里的 URL，表示使用版本控制后的路径，以保证静态资源更新时能够自动获取最新的版本。
使用命令行工具
输出版本控制信息到 JS 文件
执行如下命令：
--------- ---- -------- ------ -
它会将版本控制信息输出到 {root}/build/version.js。
启动一个 HTTP 服务器
执行如下命令：
--------- ------- ------ -
然后在浏览器里访问 http://localhost:8080/ 即可看到页面。此时你可以将 app 目录下的静态资源任意更改，然后再次刷新浏览器，即可发现它们已经被更新了。
结语
对于多人协同开发、多次迭代更新的中大型前端项目，使用 Broccoli-Timepiece 进行版本控制可以大大提高开发效率和减少错误产生的可能性。欢迎读者使用本工具，如果有任何反馈或建议，也欢迎在评论区留言！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c89ccdc64669dde516f