npm 包 fis3-postpackager-header 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发的过程中，我们经常使用一些打包工具来对我们的代码进行合并压缩等操作，其中 fis3 是一个非常优秀的前端工程构建工具。

而 fis3-postpackager-header 则是一种插件，在 fis3 打包完成后，给生成的文件头部添加自定义的内容，本篇文章就是对这个 npm 包的详细介绍及使用教程。

安装

通过 npm 安装 fis3-postpackager-header

$ npm install fis3-postpackager-header -g

全局安装后，插件才能被 fis3 在构建过程中使用。

使用

配置

fis3-postpackager-header 的使用非常简单，只需要在 fis-conf.js 中配置即可。

fis.match('**.js', {
    postpackager: fis.plugin('header', {
        banner: '/**\n * This is the header content.\n * This file is created by fis.\n **/',
    })
})

上述代码中，我们首先使用 fis.match 匹配了所有的 js 文件，然后使用 fis.plugin('header', ...) 配置了 fis3-postpackager-header 插件。其中，banner 选项用于设置我们要添加的头部信息，这里填写了一个简单的字符串内容。

示例

代码示例：

var a = 1;
console.log(a);

打包后，头部添加了我们的自定义内容：

/** 
 * This is the header content.
 * This file is created by fis. 
 **/
var a = 1;
console.log(a);

变量

fis3-postpackager-header 还支持一些特殊的变量，用于替换成真实的值：

$filename：当前文件名
$filepath：当前文件路径
$url：当前文件的 url 地址
$date：当前时间，格式为 YYYY-MM-DD hh:mm:ss

fis.match('**.js', {
    postpackager: fis.plugin('header', {
        banner: '/**\n * $filename\n * $filepath\n * $url\n * $date\n **/',
    })
})

多行内容

如果要添加多行的头部信息，也可以使用 js 的模板字符串语法，注意，模板字符串需要使用 `` 包含。

-- -------------------- ---- -------
--- ------------- - -
---
 - ---- -- --- ------ --------
 - ---- ---- -- ------- -- ----
---
--

------------------ -
    ------------- -------------------- -
        ------- --------------
    --
--

结语

fis3-postpackager-header 是一个相当给力的工具插件，使用后可以极大提升代码文件的可维护性，同时也能让我们的代码在多人协作的情况下更容易理解。

希望本文能够帮助到大家，为大家的前端开发工作提供一些参考。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddaa0