npm 包 fis3-hook-relative 使用教程

一、概述

本文旨在介绍 npm 包 fis3-hook-relative 的使用方法，该包可在 FIS3 工程中实现相对路径转换，解决 FIS3 中前端资源引用路径问题。

二、前置知识

在阅读本文之前，请确保您已经了解以下内容：

• FIS3 的安装与使用
• npm 包的安装与使用
• 前端资源引用路径相关知识

三、安装

使用 npm 安装 fis3-hook-relative：

npm install fis3-hook-relative --save-dev

四、配置

在 FIS3 工程目录下的 fis-conf.js 配置文件中，添加如下配置：

fis.hook('relative', {
  // 相对路径基准，可选配置项
  // 如下表示相对路径以 /src 为基准
  base: '/src'
});

五、使用

1、普通使用

假设我们有一张图片 /src/img/logo.png，我们希望在 index.html 中引用该图片，但是在不使用 fis3-hook-relative 的情况下，引用路径可能是这样的：

<img src="../img/logo.png">

使用 fis3-hook-relative 后，可以进行如下引用：

<img src="/src/img/logo.png">

2、模板引擎中的使用

对于复杂的模板引擎，如 ejs、jade 等，引用资源的路径更加灵活。以 ejs 为例，我们可以在模板中使用如下语句：

<img src="<%= fis.util('relative', '/src/img/logo.png') %>">

该语句相当于使用 fis3-hook-relative 进行资源引用路径的处理，为了避免因资源路径发生变化而导致的路径错误，我们可以将路径字符串存储为变量：

<% var imgPath = fis.util('relative', '/src/img/logo.png') %>
<img src="<%= imgPath %>">

六、总结

通过本文的介绍，我们了解了在 FIS3 中使用 npm 包 fis3-hook-relative 的方法，以及它在前端资源引用路径处理上的优势。同时，我们也学习了在普通使用和模板引擎中使用 fis3-hook-relative 的方法，并且能够应用到实际工作中。

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