介绍
menio 是一个基于 Node.js 的前端资源管理器，可以用来管理 JS、CSS、图片、字体等资源。它提供了一种简单的方式来为多个页面加载公共资源，并且支持自动创建版本号，可以避免浏览器缓存导致的问题。
安装 menio
可以通过 npm 安装 menio：
npm install menio --save-dev
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)
根据页面名称获取需要加载的静态资源。
const menio = require('menio');
// 获取 home 页面需要加载的静态资源
const assets = menio.getPageAsset('home');
console.log(assets);输出结果：
[ '/static/css/main.css?v=76aa23', '/static/js/lib/jquery.min.js?v=53df31', '/static/js/lib/vue.min.js?v=249e3e', '/static/js/home.js?v=c31d17' ]
menio.getAssetUrl(fileName)
根据文件名获取静态资源的 URL。
const menio = require('menio');
// 获取 main.css 的 URL
const url = menio.getAssetUrl('/static/css/main.css');
console.log(url);输出结果：
//localhost:3000/static/css/main.css?v=76aa23
menio.renderAssets(pageName)
渲染页面需要加载的静态资源标签，并返回一个对象。
const menio = require('menio');
// 渲染 home 页面需要加载的静态资源标签
const renderedAssets = menio.renderAssets('home');
console.log(renderedAssets);输出结果：
-- -------------------- ---- -------
-
--- -
-------- -------------------------------------------------------
-------- ----------------------------------------------------
-------- --------------------------------------------
--
---- -
------ ---------------- --------------------------------------
-
-使用示例
下面是使用 menio 构建一个简单的 Vue.js 单页应用的示例。
目录结构
-- -------------------- ---- -------
- -----
- ----
- -----------
- ---------
- ------
- -----
- -------
- -------
- ----------
- ------
- -------
- -------
- ----------
- -------
- ----
- --------
- ---
- ----
- -------------
- ----------
- -------
- --------
- ---------------
- ------------
- -----------------menio.config.js
module.exports = {
input: './src',
output: './dist',
staticPath: '/static',
useHash: true
};webpack.config.js
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
------- -------------
-------- -
------------------- -
---- ------
------ -------------
-------- ------
------------- ------- -------------
--------- ----------
------------- ------
------------------- ----------
---------- -----
-
-
--
-- ---
-
--
-------- -
-- ---
--- ------------
--------- ------------------
--------- ----------------------------
------- --------
---
--- ------------
--------- -------------------
--------- -----------------------------
------- ---------
--
-
--pages/home/App.vue
-- -------------------- ---- -------
----------
-----
------ ----- -------
------- ---------------------------------
-------- --- ---------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------ --------
---- -
--
--
-------- -
--------- -
-------- - --------------
-
-
--
---------pages/home/main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});pages/home/index.html
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------------
----- ---------------- ----------------------------
-------
------
---- ---------------
---- ------ ----- ------ ---
-- --- ------ - --------------------------- --
-- --- -------------- - --------------------------- --
-- -- -------------- - -- - --
-- ----------------------------------- ----- - --
--- --- --
-- --- --
-- ---------------------------------- ---- - --
--- -- --
-- --- --
-- - --
-------
-------static/js/home.js
-- -------------------- ---- ------- -- -- ----- --- -------- ------ ----- ---- -------- -- --- ------ -- ------ --------- -- ---------------- -- ------- ------ --- ----------- -- ------------------------------- - -- ----------- ----------------------------------------------- -------------------------------------------- -- -- ----- --- -------- ----- -------------- - --------------------------- -- -------- ----------------------------------- ----- - --------------------------------------------- ----- --- ---------------------------------- ---- - --------------------------------------------- ---- --- -
构建
在 package.json 中添加构建脚本：
{
"scripts": {
"build": "webpack && menio"
}
}然后运行：
npm run build
总结
menio 的功能非常强大，使用起来也非常简单。它的 API 也非常实用，可以在构建后的代码中直接调用，避免了手动维护静态资源的繁琐。
如果您的项目中存在大量的静态资源且需要进行合理的管理，menio 绝对是一个不错的选择，它将极大地提升你的生产效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b72