简介
@absolunet/nwayo-toolbox 是一个基于 nwayo、webpack 和 postcss 的前端工具包，主要用于构建样式文件（CSS、SASS、LESS），并支持自动生成雪碧图和适配移动端等功能。
安装
使用 npm 安装：
npm install @absolunet/nwayo-toolbox
使用
配置文件
使用 @absolunet/nwayo-toolbox 需要提供一个配置文件，其中包含 nwayo 和 webpack 的配置项。
在项目根目录下，新建一个 nwayo.config.js 文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ----- - - ------------------------------------
-------------- - -------
-- ----- --
--------- -
------- -------------------- ------- -----------------
------- ---
--
-- ------- --
-------- -------- ------------ -- -------
---在这个文件中，我们使用 nwayo 函数来构造一个 nwayo 的配置对象，并将其导出。
nwayo 接受一个配置对象作为参数，其中包含以下选项：
manifest：控制是否生成 manifest 文件和生成的文件路径。可以为一个对象，包含以下选项：output：包含生成文件的输出路径。默认为manifest.json。prefix：用于在生成的 CSS 中添加 URL 前缀。默认为''。
webpack：可以用于修改 webpack 配置的函数。可以接受两个参数，第一个是原始的 webpack 配置对象，第二个是 nwayo 配置对象。
打包命令
安装好 @absolunet/nwayo-toolbox 并创建好配置文件后，我们可以使用 npm 命令来进行文件打包：
npx nwayo build
这个命令将读取我们之前创建的 nwayo.config.js，并使用其中的 nwayo 和 webpack 配置来进行打包。
自动生成雪碧图
在 nwayo 中可以使用 sprite 函数来自动生成雪碧图。
首先，我们要先安装 @absolunet/nwayo-sprite：
npm install @absolunet/nwayo-sprite
然后在 nwayo.config.js 中新增以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ----- - - ------------------------------------
----- ------ - -----------------------------------
-------------- - -------
-- ---
-- -----
------- -
-- -------
----- -------------------- ------- --------------
-- -------
----------- ----------
-- -----
------- ---------
-- --------
--------- -----
-- --------
---------- -----
-- ---------------
---- -------------------- ------ ---------
--
-- ---
---在这个配置中，我们使用 sprite 函数来设置自动生成雪碧图的选项。
这个函数接受一个对象作为参数，其中包含以下选项：
dest：指定雪碧图输出路径。background：指定雪碧图背景颜色。可以使用颜色字符串或一个函数来自定义背景颜色。prefix：雪碧图 CSS 类选择器的前缀。maxWidth：单张图片最大宽度。超出这个宽度的图片会被分割成多张图片。maxHeight：单张图片最大高度。超出这个高度的图片会被分割成多张图片。src：指定要处理的图片路径。可以是一个具体的路径，也可以是一个函数，函数接受文件路径作为参数，返回一个布尔值用于判断是否需要处理这个文件。
然后就可以在样式文件中使用 .icon-{icon-name} 这个类选择器来引用雪碧图中的图标文件了。
.icon-search {
width: 20px;
height: 20px;
background: url('../dist/sprite.png') no-repeat 0 0;
background-size: 80px 80px;
}移动设备适配
在 nwayo 中可以使用 postcss-px-to-viewport 插件来自动将 px 值转换成视口单位（vw、vh）。
首先，我们要先安装 postcss-px-to-viewport：
npm install postcss-px-to-viewport
然后在 nwayo.config.js 中新增以下代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- - ----- - - ------------------------------------ ------ ------------ - ---------------------------------- -------------- - ------- -- --- - -- ------- -- - -------- - - -------- - - -------------- - -------------- ---- -- ---- - -------------- -- -- ---------- - ------------- ----- -- -------- - -- - -- - -- -- --- ---
在这个配置中，我们新增一个 postcss 选项，用于配置 postcss 插件的选项。
其中，我们使用 pxToViewport 插件将 px 值转换成视口单位。
pxToViewport 接受一个对象作为参数，其中包括以下选项：
viewportWidth：视口宽度。可以是一个数字或一个函数，函数接受当前处理的文件路径作为参数，返回一个数字。unitPrecision：转换后保留的小数位数。viewportUnit：转换成的视口单位。可以是 vw、vh 或任何其他计算单位。minPixelValue：指定最小的转换单位。例如，如果值为 2，则所有小于 2px 的视口单位将被转换成像素单位。mediaQuery：是否在媒体查询中也进行转换。
在这个配置完成后，我们就可以在样式文件中使用 px 值，并自动将其转换成视口单位了。
.card {
width: 375px;
height: 200px;
}转换后：
.card {
width: 50vw;
height: 26.667vw;
}结语
通过本文，我们学习了如何使用 @absolunet/nwayo-toolbox 来构建前端项目，并实现自动化的雪碧图构建和移动设备适配功能。随着项目的复杂度不断增加，我们可以进一步探索 nwayo 和 webpack 的更多功能，以提高前端项目的自动化程度和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb416b5cbfe1ea061122e