介绍
menio 是一个基于 Node.js 的前端资源管理器，可以用来管理 JS、CSS、图片、字体等资源。它提供了一种简单的方式来为多个页面加载公共资源，并且支持自动创建版本号，可以避免浏览器缓存导致的问题。
安装 menio
可以通过 npm 安装 menio：
--- ------- ----- ----------
menio 的使用
配置
在你的项目中创建一个 menio.config.js 文件，来进行 menio 的配置。
-------------- - - -- ----- ------ -------- -- ----- ------- --------- -- ----- -------------- -- -- ------ ----------- ---------- -- ---- ---- -- ----- ----- -- ---- --- ------- ------ -- --- -- -------- --- -- ---------- --------------- ----- -- ---- ---- -------- ---- --
可以看到，menio 的配置非常清晰易懂，也非常灵活。
- input：输入文件夹，也就是源代码所在的目录。
- output：输出文件夹，也就是构建后文件所在的目录。
- versionLength：版本号长度，如果不传这个参数，menio 将根据哈希值自动生成一个版本号。
- staticPath：静态资源路径，可以设置为 CDN 的地址。
- gzip：是否开启 gzip 压缩。
- useCDN：是否使用 CDN。
- cdnPath：CDN 路径，如果设置了该参数，则 menio 会将引用的静态资源路径转换为对应的 CDN 路径。
- removeComments：是否删除构建时的注释。
- useHash：是否使用文件内容的哈希值作为文件名。
使用 API
menio 提供了一些非常实用的 API，可以在代码中方便的调用：
menio.getPageAsset(pageName)
根据页面名称获取需要加载的静态资源。
----- ----- - ----------------- -- -- ---- ----------- ----- ------ - --------------------------- --------------------
输出结果：
- -------------------------------- ---------------------------------------- ------------------------------------- ----------------------------- -
menio.getAssetUrl(fileName)
根据文件名获取静态资源的 URL。
----- ----- - ----------------- -- -- -------- - --- ----- --- - ------------------------------------------ -----------------
输出结果：
---------------------------------------------
menio.renderAssets(pageName)
渲染页面需要加载的静态资源标签，并返回一个对象。
----- ----- - ----------------- -- -- ---- ------------- ----- -------------- - --------------------------- ----------------------------
输出结果：
-
--- -
-------- -------------------------------------------------------
-------- ----------------------------------------------------
-------- --------------------------------------------
--
---- -
------ ---------------- --------------------------------------
-
-使用示例
下面是使用 menio 构建一个简单的 Vue.js 单页应用的示例。
目录结构
- -----
- ----
- -----------
- ---------
- ------
- -----
- -------
- -------
- ----------
- ------
- -------
- -------
- ----------
- -------
- ----
- --------
- ---
- ----
- -------------
- ----------
- -------
- --------
- ---------------
- ------------
- -----------------menio.config.js
-------------- - - ------ -------- ------- --------- ----------- ---------- -------- ---- --
webpack.config.js
-------------- - -
-- ---
------- -
------ -
-
----- ---------
------- -------------
-------- -
------------------- -
---- ------
------ -------------
-------- ------
------------- ------- -------------
--------- ----------
------------- ------
------------------- ----------
---------- -----
-
-
--
-- ---
-
--
-------- -
-- ---
--- ------------
--------- ------------------
--------- ----------------------------
------- --------
---
--- ------------
--------- -------------------
--------- -----------------------------
------- ---------
--
-
--pages/home/App.vue
----------
-----
------ ----- -------
------- ---------------------------------
-------- --- ---------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------ --------
---- -
--
--
-------- -
--------- -
-------- - --------------
-
-
--
---------pages/home/main.js
------ --- ---- ------ ------ --- ---- ------------ --- ----- --- ------- ------- - -- ------ ---
pages/home/index.html
--------- -----
----- -------------
------
----- ----------------
-------------------
----- ---------------- ----------------------------
-------
------
---- ---------------
---- ------ ----- ------ ---
-- --- ------ - --------------------------- --
-- --- -------------- - --------------------------- --
-- -- -------------- - -- - --
-- ----------------------------------- ----- - --
--- --- --
-- --- --
-- ---------------------------------- ---- - --
--- -- --
-- --- --
-- - --
-------
-------static/js/home.js
-- -- ----- --- -------- ------ ----- ---- -------- -- --- ------ -- ------ --------- -- ---------------- -- ------- ------ --- ----------- -- ------------------------------- - -- ----------- ----------------------------------------------- -------------------------------------------- -- -- ----- --- -------- ----- -------------- - --------------------------- -- -------- ----------------------------------- ----- - --------------------------------------------- ----- --- ---------------------------------- ---- - --------------------------------------------- ---- --- -
构建
在 package.json 中添加构建脚本：
-
---------- -
-------- -------- -- ------
-
-然后运行：
--- --- -----
总结
menio 的功能非常强大，使用起来也非常简单。它的 API 也非常实用，可以在构建后的代码中直接调用，避免了手动维护静态资源的繁琐。
如果您的项目中存在大量的静态资源且需要进行合理的管理，menio 绝对是一个不错的选择，它将极大地提升你的生产效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066f3e1d8e776d08040b72