前言
在前端开发中，我们经常需要使用打包工具来处理我们的项目，并将其打包成静态资源。而在这其中，fis3 是一个不错的选择。它是一个基于前端工程化的构建工具，能够快速、高效地构建前端项目。
而在 fis3 中，fis-prepackager-derived 是一个非常实用的插件。它可以帮助我们将多个模块打包成一个文件，并且支持模块化开发。本文将着重介绍 fis-prepackager-derived 的使用方法，包括安装、配置和示例代码。希望对大家有所帮助。
安装
安装 fis-prepackager-derived 只需要在命令行中输入以下命令即可：
npm install fis-prepackager-derived --save-dev
配置
安装完毕之后，我们需要在 fis-conf.js 中进行配置。具体配置如下：
fis.match('*.js', { prepackager: fis.plugin('derived', { // 配置项 }) });
接下来，就是配置项了。以下是一些常用的配置项：
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 中的配置项：
-- -------------------- ---- ------- ----------------- - ------------ --------------------- - ----- --------------- ---------- -------------- - ------ ------------ -- -------- ------------------ ----- - --- ------------- - ---- ------------------------------ --------------------- ---------------------- --- ------------- - ---- ------------------------------ --------------------- ---------------------- ------ ------------- - ------------- - --------- -- ------------------- -- -- ---展开代码
接下来，我们运行以下命令进行打包：
fis3 release -d ./output
以上命令会将打包结果输出到 ./output 目录下。
最后，我们可以看一下打包结果是否正确：
-- -------------------- ---- ------- -- --------- ---------------- ----------------- -------- ------- - --- ------ - ---------- - ---------------------- -- -------------- - ------- --- ---------------- ----------------- -------- ------- - --- ------ - ---------- - ---------------------- -- -------------- - ------- --- ---------------- ----------------- -------- ------- - --- ------ - ------------------ --- ------ - ------------------ --- ------ - ---------- - --------- --------- -- -------------- - ------- ---展开代码
以上，就是一个简单的 fis-prepackager-derived 的使用示例。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63501
