在前端开发的过程中，我们经常使用一些打包工具来对我们的代码进行合并压缩等操作，其中 fis3 是一个非常优秀的前端工程构建工具。
而 fis3-postpackager-header 则是一种插件，在 fis3 打包完成后，给生成的文件头部添加自定义的内容，本篇文章就是对这个 npm 包的详细介绍及使用教程。
安装
通过 npm 安装 fis3-postpackager-header
- --- ------- ------------------------ --
全局安装后，插件才能被 fis3 在构建过程中使用。
使用
配置
fis3-postpackager-header 的使用非常简单，只需要在 fis-conf.js 中配置即可。
------------------ -
------------- -------------------- -
------- ------ - ---- -- --- ------ ---------- - ---- ---- -- ------- -- ------ -----
--
--上述代码中，我们首先使用 fis.match 匹配了所有的 js 文件，然后使用 fis.plugin('header', ...) 配置了 fis3-postpackager-header 插件。其中，banner 选项用于设置我们要添加的头部信息，这里填写了一个简单的字符串内容。
示例
代码示例：
--- - - -- ---------------
打包后，头部添加了我们的自定义内容：
--- - ---- -- --- ------ -------- - ---- ---- -- ------- -- ---- --- --- - - -- ---------------
变量
fis3-postpackager-header 还支持一些特殊的变量，用于替换成真实的值：
- $filename：当前文件名
- $filepath：当前文件路径
- $url：当前文件的 url 地址
- $date：当前时间，格式为 YYYY-MM-DD hh:mm:ss
------------------ -
------------- -------------------- -
------- ------ - ----------- - ----------- - ------ - ------- -----
--
--多行内容
如果要添加多行的头部信息，也可以使用 js 的模板字符串语法，注意，模板字符串需要使用 `` 包含。
--- ------------- - -
---
- ---- -- --- ------ --------
- ---- ---- -- ------- -- ----
---
--
------------------ -
------------- -------------------- -
------- --------------
--
--结语
fis3-postpackager-header 是一个相当给力的工具插件，使用后可以极大提升代码文件的可维护性，同时也能让我们的代码在多人协作的情况下更容易理解。
希望本文能够帮助到大家，为大家的前端开发工作提供一些参考。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fec81e8991b448ddaa0