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

前言

随着前端技术的不断发展，我们经常需要用到打包工具来进行前端项目的构建。而现在的主流构建工具中，fis3 无疑是一个非常强大的工具，它的插件生态也非常丰富。而本篇文章将介绍一个非常实用的插件——fis3-packager-smart，它可以帮助我们自动地进行资源依赖分析，从而构建出符合我们预期的最终输出结果。

安装

我们可以通过 npm 来安装 fis3-packager-smart 插件：

npm install fis3-packager-smart --save-dev

配置

为了能够让 fis3 使用 fis3-packager-smart 插件，我们需要在 fis-conf.js 配置文件中进行如下配置：

fis.match('::package', {
    packager: fis.plugin('smart')
})

这样，fis3-packager-smart 插件就可以被 fishook 正确地调用了。接下来，让我们通过具体的应用示例来展示这个插件的使用方法。

应用示例

假设我们现在有如下目录结构：

├── js
│   ├── a.js
│   ├── b.js
│   ├── c.js
│   ├── d.js
│   └── main.js
├── css
│   ├── a.css
│   └── b.css
└── page
    └── index.html

其中，a.js，b.js，c.js 和 d.js 之间有相互的依赖关系。main.js 中包含了对这些 js 文件的引用，a.css 和 b.css 也被 index.html 引用了。

那么，如何使用 fis3-packager-smart 插件来实现这些资源的有效打包呢？

首先，我们需要在 html 文件中使用如下语句来引用 js 和 css 资源：

<!DOCTYPE html>
<html>
<head>
    <title>fis3-packager-smart 使用示例</title>
    <link rel="stylesheet" href="/css/*.css">
</head>
<body>
    <script src="/js/main.js"></script>
</body>
</html>

接着，我们需要在 fis-conf.js 文件中进行如下配置：

fis.match('::package', {
    packager: fis.plugin('smart')
});

fis.match('*.js', {
    packTo: 'js/bundle.js'
});

fis.match('*.css', {
    packTo: 'css/bundle.css'
});

fis.match('*.html', {
    useMap: true
});

这些配置分别对应了如下的含义：

使用 fis3-packager-smart 插件进行资源的打包。
将所有的 js 文件打包到 js/bundle.js 文件中。
将所有的 css 文件打包到 css/bundle.css 文件中。
在 html 中开启 md5 戳功能。

在上面的配置中，需要注意的是，packTo 配置项使用的是相对于项目根目录的路径，而无需使用绝对路径。

然后，我们运行如下命令进行项目构建：

fis3 release

这时，我们就能够看到在 dist 目录中生成了如下的文件：

├── js
│   ├── a.js
│   ├── b.js
│   ├── c.js
│   ├── d.js
│   └── bundle.js
├── css
│   ├── a.css
│   ├── b.css
│   └── bundle.css
└── page
    └── index.html

可以看到，所有的 js 文件都被正确地打包到了 bundle.js 文件中，所有的 css 文件也被打包到了 bundle.css 文件中。同时，我们还可以注意到 bundle.js 文件中已经包含了所有 js 文件之间的依赖关系信息。

最后，我们只需要将 dist 目录上传到服务器上，就能够看到我们预期的网页效果了！

总结

以上是 fis3-packager-smart 插件的使用教程。需要指出的是，fis3-packager-smart 插件并不是适用于所有项目的，因为此插件的作用是自动地分析资源间的依赖关系，因此在某些情况下可能会存在误判的情况。在这种情况下，我们就需要结合实际的项目需求，来决定是否使用此插件。

但是，fis3-packager-smart 插件在一些具有较为复杂的资源依赖关系的项目中，例如前端框架的编写等，都有着非常积极的应用价值。通过灵活的配置，我们可以方便地实现资源的打包和合并，从而极大地提高前端工程的构建效率和代码可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c0f