简介
npm 包 happner-assets 是基于 happner 构建的一个前端资源管理模块。它可以帮助开发者更好地管理前端资源文件，并实现前后端分离的开发模式。
安装
使用 npm 进行安装即可：
npm install happner-assets
使用方法
初始化
在建立项目前，请先在项目根目录中添加 happner.config.js 文件：
-- -------------------- ---- ------- -------------- - - ----------- - ----------------- - ------- - ------------ -------- -- --------- ------------- ------ -- -------- ------ - ---- - ------------ - ----- ----------- ----- ---- - -- --- - ---------------- - ----- ---------- ----- ----- ------- ---- - -- ----- - ------------- -- ------ - ---------- - - - - - --展开代码
使用
在 Express 项目的 app.js 文件中使用 happner-assets：
-- -------------------- ---- ------- --- ------- - ------------------- --- ------------- - -------------------------- --- ----- - -------------------- --------- - ----- --- -------- --- --------- --- ------ --- -------------- ------------- -- ----------- - -------------- - ------------ ------------ - - --- --- --- - ---------- --------------------- - ---------------------------------- ---------------- ------- ---------------------------------- --- ----------------- - ------------------------------------------ --------------------------- --- ----------------------- - ------------------------------------------------ ---------------------------------展开代码
文件配置
在 happner.config.js 文件中添加以下文件配置，即可添加资源文件：
-- -------------------- ---- ------- ------ - ---- - ------------ - ----- ----------- ----- ---- - -- --- - ---------------- - ----- ---------- ----- ----- ------- ---- - -- ----- - ------------- -- ------ - ---------- - -展开代码
其中，css、js、font 和 image 为文件类型，数组中为该类型的资源文件配置。
对于每个资源文件，可以设定以下配置项：
- path：文件路径
- hash：是否添加文件 Hash 值
- minify：是否进行压缩
输出文件
我们可以在前端 HTML 文件中使用以下代码输出资源文件：
<!-- stylesheets --> {{happnerassets:css}} <!-- scripts --> {{happnerassets:js}}
在输出过程中，happner-assets 会根据文件类型自动生成对应的 HTML 代码片段。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- -- ----------------- -------------- - - ----------- - ----------------- - ------- - ------------ -------- ------------- ------ ------ - ---- - ------------ - ----- ----------- ----- ---- - -- --- - ---------------- - ----- ---------- ----- ----- ------- ---- - -- ----- - ------------- -- ------ - ---------- - - - - - --展开代码
-- -------------------- ---- ------- -- ------ --- ------- - ------------------- --- ------------- - -------------------------- --- ----- - -------------------- --------- - ----- --- -------- --- --------- --- ------ --- -------------- ------------- -- ----------- - -------------- - ------------ ------------ - - --- --- --- - ---------- --------------------- - ---------------------------------- ---------------- ------- ---------------------------------- --- ----------------- - ------------------------------------------ --------------------------- --- ----------------------- - ------------------------------------------------ --------------------------------- -- ---------- --------- ----- ------ ------ --------------------- --------------- ----- ---------------- --------------------- ------- ------ ------------------ ------------ ------- ------------------------------------------------------- -------------------- ------- -------展开代码
总结
happner-assets 是一个非常实用的前端资源管理模块，可以帮助开发者更好地管理前端资源文件，并实现前后端分离的开发模式。在项目中使用 happner-assets 的步骤非常简单，只需要进行初始化配置和使用即可。在实际的开发项目中，使用 happner-assets 可以极大地提高开发效率，值得开发者们尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71889
