前言
在前端开发中，构建工具是必不可少的一部分。而 Broccoli-Timepiece 正是一个基于 Broccoli 的构建工具，专为实现静态资源版本控制而设计。本文将介绍如何使用该工具，以便更好地管理和维护项目。
安装
使用 npm 进行安装：
npm i -D broccoli-timepiece
使用说明
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 进行版本控制。
目录结构
. ├── app │ ├── index.html │ ├── main.css │ └── main.js ├── Brocfile.js └── package.json
安装依赖
npm i -D broccoli broccoli-merge-trees broccoli-uglify-js broccoli-sass broccoli-static-compiler broccoli-timepiece
Brocfile.js
-- -------------------- ---- ------- ----- ---------- - ------------------------------- ----- ---------------- - ----------------------------- ----- ------------ - ------------------------------------ ----- -------------- - ----------------------------------------- ----- - ---- - - --------------- ----- - ----------- - - ------------- ----- -------------- - ----------------------------------- ----- --------- - ----------------------------- ----- ------- - --------------------- - -------- -- -- ----- ------- - --- --------------------- ------------ ----------- - ---------- ----- ------------------ ----- ------------ ----------- -- ----- ------ - --- ----------------------- - ------- ---------- -- ----- --------- - ------------------------ ----- -------- - --- ---------------------- -------- -------- ------- --- - ------- ----- -- -------------- - --------展开代码
index.html
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ------------------------- ------------ ----- ---------------- ----------- --------------- ------- ------ ---- ------------------ ---------- ----------- ------ ------- ---------- ----------------------- ------- -------展开代码
其中，使用 {{url}} 标记标签里的 URL，表示使用版本控制后的路径，以保证静态资源更新时能够自动获取最新的版本。
使用命令行工具
输出版本控制信息到 JS 文件
执行如下命令：
timepiece info --online --root .
它会将版本控制信息输出到 {root}/build/version.js。
启动一个 HTTP 服务器
执行如下命令：
timepiece dynamic --root .
然后在浏览器里访问 http://localhost:8080/ 即可看到页面。此时你可以将 app 目录下的静态资源任意更改，然后再次刷新浏览器，即可发现它们已经被更新了。
结语
对于多人协同开发、多次迭代更新的中大型前端项目，使用 Broccoli-Timepiece 进行版本控制可以大大提高开发效率和减少错误产生的可能性。欢迎读者使用本工具，如果有任何反馈或建议，也欢迎在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde516f
