前端开发离不开构建工具的支持，而 fis3 是一款被广泛使用的前端构建工具。在 fis3 中，我们可以通过加载不同的插件来完成不同的功能。而在本文中，我们将介绍一个非常有用且常用的插件：fis3-hook-relative-fork。
简介
fis3-hook-relative-fork 是一个针对多页面应用（Multi Page Application，MPA）而开发的插件。在 MPA 应用中，多个页面之间会存在相互引用的情况。而这些引用往往是通过相对路径的方式完成的。而 fis3-hook-relative-fork 可以自动处理这些相对路径，从而避免了相对路径的手动维护。
安装
fis3-hook-relative-fork 已被收录至 npm 包管理器中，我们可以使用 npm 命令进行安装。
npm install fis3-hook-relative-fork --save-dev
使用方法
在项目根目录下的 fis-conf.js 文件中，添加以下代码即可启用 fis3-hook-relative-fork 插件。
fis.hook('relative-fork', {
// 配置项
});配置项
fis3-hook-relative-fork 插件提供了以下配置选项。
base
- 类型：String
- 默认值：第一个文件夹的名字
当存在多个页面时，这些页面往往不是平铺在项目根目录下的。而是在一个或多个文件夹中，每个文件夹代表一个页面。base 配置项可以指定这些页面所在的根目录。如果不设置该值，则默认使用第一个文件夹的名字作为页面的根目录。
include
- 类型：Array
- 默认值：所有文件
include 配置项可以指定只对哪些文件进行路径替换。可以使用通配符 * 匹配任意字符。
fis.hook('relative-fork', {
include: ['/html/*.html', '/js/*.js']
});exclude
- 类型：Array
- 默认值：无
该配置项与 include 选项相反，可以指定哪些文件不进行路径替换。
fis.hook('relative-fork', {
exclude: ['/html/layout.html']
});配置示例
下面是一个完整的配置示例。
fis.hook('relative-fork', {
base: 'src/pages',
include: ['*.html', '*.js'],
exclude: ['src/pages/layout.html']
});示例代码
假设我们有如下目录结构。
-- -------------------- ---- -------
-
--- -----------
--- ---
- --- -----
- - --- ----------
- - --- ----------
- --- --
- --- -------
- --- ---------
--- ------
--- ---
- --- ----------
- --- ---------
--- ------
- --- --------
--- --
--- ------
--- ------我们可以在 /src/pages/index.html 中引入 /src/js/main.js 和 /static/js/js1.js 两个文件。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------
----- ---------------- -----------------------------------
----- ---------------- ----------------------------------
-------
------
--------- ----------
------- ---------------------- --------------------------------------
------- ---------------------- ------------------------------------
-------
-------我们可以通过 fis3-hook-relative-fork 插件来自动处理这些相对路径。
fis.hook('relative-fork', {
base: 'src/pages',
include: ['*.html', '*.js'],
exclude: ['src/pages/layout.html']
});通过以上配置，我们可以在 /src/pages/index.html 中将引用路径改为相对路径。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------
----- ---------------- -----------------------------------------
----- ---------------- ----------------------------------------
-------
------
--------- ----------
------- ---------------------- --------------------------------------------
------- ---------------------- -----------------------------------
-------
-------综上所述，fis3-hook-relative-fork 插件是一款非常实用的插件，可以为我们的 MPA 应用提供便利，让我们不再需要手动维护相对路径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596f81e8991b448d6f4d