前言
在前端开发中，我们经常需要使用打包工具来处理我们的项目，并将其打包成静态资源。而在这其中，fis3 是一个不错的选择。它是一个基于前端工程化的构建工具，能够快速、高效地构建前端项目。
而在 fis3 中，fis-prepackager-derived 是一个非常实用的插件。它可以帮助我们将多个模块打包成一个文件，并且支持模块化开发。本文将着重介绍 fis-prepackager-derived 的使用方法，包括安装、配置和示例代码。希望对大家有所帮助。
安装
安装 fis-prepackager-derived 只需要在命令行中输入以下命令即可：
--- ------- ----------------------- ----------
配置
安装完毕之后，我们需要在 fis-conf.js 中进行配置。具体配置如下：
----------------- -
------------ --------------------- -
-- ---
--
---接下来，就是配置项了。以下是一些常用的配置项：
mode
mode 表示打包的模式，有两种取值。分别是：
dependencies表示以依赖关系进行打包。这个模式会根据依赖关系，将依赖的所有模块打包到同一个文件中。这个模式适用于文件较多、复杂的项目。priority表示以优先级进行打包。这个模式会根据优先级打包。优先级高的模块会被打包到前面。这个模式适用于文件较少、简单的项目。
derivedId
derivedId 表示导出的文件名，可以是字符串或者函数。如果是函数，则该函数返回字符串。
derived
derived 表示导出的文件内容，可以是字符串或者函数。如果是函数，则该函数返回字符串。
ignoreDependencies
ignoreDependencies 表示忽略某些依赖。
通过以上配置，我们就可以使用 fis-prepackager-derived 进行打包了。
示例代码
在配置完 fis-conf.js 之后，我们就可以试着进行打包了。以下是一个示例代码：
----------- --- ------ - ----------------------- --- ------ - ----------------------- --- ------ - ---------- - --------- --------- -- -------------- - ------- ----------- --- ------ - ---------- - ---------------------- -- -------------- - ------- ----------- --- ------ - ---------- - ---------------------- -- -------------- - -------
以上代码中，我们定义了一个 parent 模块，依赖了 child1 和 child2 两个模块。现在，我们就可以使用 fis-prepackager-derived 进行打包了。
首先，我们需要修改 fis-conf.js 中的配置项：
----------------- -
------------ --------------------- -
----- ---------------
---------- -------------- -
------ ------------
--
-------- ------------------ ----- -
--- ------------- - ----
------------------------------
--------------------- ----------------------
--- ------------- - ----
------------------------------
--------------------- ----------------------
------ ------------- - ------------- - ---------
--
------------------- --
--
---接下来，我们运行以下命令进行打包：
---- ------- -- --------
以上命令会将打包结果输出到 ./output 目录下。
最后，我们可以看一下打包结果是否正确：
-- ---------
---------------- ----------------- -------- ------- -
--- ------ - ---------- -
----------------------
--
-------------- - -------
---
---------------- ----------------- -------- ------- -
--- ------ - ---------- -
----------------------
--
-------------- - -------
---
---------------- ----------------- -------- ------- -
--- ------ - ------------------
--- ------ - ------------------
--- ------ - ---------- -
---------
---------
--
-------------- - -------
---以上，就是一个简单的 fis-prepackager-derived 的使用示例。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/63501