在前端开发中，我们经常需要使用构建工具来进行一些自动化的操作，比如压缩合并代码、自动添加浏览器前缀等等。而 fis3 是一个非常流行的前端构建工具，它提供了各种插件来帮助我们完成这些自动化操作。其中一个非常有用的插件就是 fis3-parser-get-conf，本篇文章将会详细介绍并使用示例代码演示使用方法和原理。
什么是 fis3-parser-get-conf 插件
fis3-parser-get-conf 是一个 fis3 插件，它可以自动提取 html 中的属性，并以 json 格式输出，我们可以在其他插件中使用这些属性作为配置。比如我们可以通过 fis3-postprocessor-px2rem 插件将 css 中的像素值转换为 rem 值，但是每个项目的设计稿宽度和 rem 转换比例都不一样，这时候就可以使用 fis3-parser-get-conf 插件提取 html 页面中的 meta 标签中的设计稿宽度和自定义属性中的 rem 转换比例。
安装 fis3-parser-get-conf 插件
首先需要安装 fis3-parser-get-conf 插件，可以使用 npm 进行安装：
npm install fis3-parser-get-conf --save-dev
使用 fis3-parser-get-conf 插件
在 fis3 的配置文件中，我们需要对 fis3-parser-get-conf 进行配置。比如我们要提取 meta 标签中的设计稿宽度和自定义属性中的 rem 转换比例，可以添加如下配置：
fis.match('*.html', {
parser: fis.plugin('get-conf', {
designWidth: 'meta[name="viewport"][content*=width]', // 获取 meta 标签中的设计稿宽度
rem2px: 'html[data-rem2px]' // 获取自定义属性中的 rem 转换比例
})
});这样配置之后，当 fis3 处理 html 文件时，它会自动提取 meta 标签中的设计稿宽度和自定义属性中的 rem 转换比例，并将它们保存到一个 json 文件中。
使用提取到的配置
fis3-parser-get-conf 插件提取到的配置以 json 格式保存到一个 json 文件中，我们可以通过 fis3 的 API 在其他插件中使用这些配置。比如我们要在 fis3-postprocessor-px2rem 插件中使用提取到的 rem 转换比例，可以添加如下代码：
-- -------------------- ---- -------
------------------ -
-------------- -------------------- -
--------- -------------- -
--- ------------ - ---
--- -------- - ------------ - ------------- -- --------- -- -------------------- ----- ---- ----
-- --------------------------- -
--- ---- - ------------------------------------
------------ - ------------
-
------ -------------
-
--
---这样，我们就可以成功地在 fis3-postprocessor-px2rem 插件中使用了从 html 页面中提取到的 rem 转换比例了。
总结
fis3-parser-get-conf 插件可以帮助我们从 html 页面中自动提取配置信息，并将这些配置信息保存到一个 json 文件中。我们可以在其他插件中使用这些配置信息来完成一些自动化的操作。fis3-parser-get-conf 插件的使用方法非常简单，但是它却可以帮助我们提高工作效率和代码质量，使用起来非常值得推荐。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69840