相信作为前端的开发者，大家一定都很熟悉 npm 了。npm 是前端项目开发中常用的包管理工具，通过它可以轻松管理依赖项和安装各种 npm 包。而其中一个常用的 npm 包就是 relative-url，它可以帮助我们在前端开发中生成相对 URL。
什么是 relative-url 包
相对 URL 是指相对于当前页面的 URL，如在网页中添加一个链接 <a href="about.html">about</a>，则点击该链接后将跳转至当前 URL 如果是 https://example.com/index.html ，则跳转至 https://example.com/about.html。
在前端开发中，我们有时需要通过 JS 动态生成一些相对 URL，而这时我们可以借助 npm 包 relative-url 来实现。
relative-url 如何使用
relative-url 可以在任何支持 CommonJS 或 ES6 模块的构建流程中使用，例如 webpack、Rollup 等。
安装
在使用 relative-url 之前，需要先安装它。打开终端，运行以下命令：
--- ------- ------------ ------
安装完成后，我们就可以在项目的前端代码中使用 relative-url 了。
使用
我们可以使用 relative-url 的两个函数：toUrl 和 toPath。其中，toUrl 将路径转换为相对 URL，而 toPath 将相对 URL 转换为路径。
下面是 toUrl 的使用示例：
----- ----------- - ------------------------ ----- --- - --------------------------------- ---------------- ----------------- -- -- ------------
toUrl 接受两个参数，第一个参数是需要转换的路径，第二个参数是其所基于的路径。在上面的代码中，需要转换的路径是 './about.html'，它所基于的路径是 './index.html'。通过调用 relativeUrl.toUrl() 函数，我们将 './about.html' 转换为了相对 URL 'about.html'。
下面是 toPath 的使用示例：
----- ----------- - ------------------------ ----- ---- - -------------------------------- ---------------- ------------------ -- -- --------------
toPath 同样接受两个参数，第一个参数是需要转换的相对 URL，第二个参数是其所基于的路径。在上面的代码中，需要转换的相对 URL 是 'about.html'，它所基于的路径是 './index.html'。通过调用 relativeUrl.toPath() 函数，我们将 'about.html' 转换为了相对路径 './about.html'。
relative-url 使用场景
在 SPA 中使用
在单页面应用程序中，我们通常需要通过 JS 动态添加页面链接。假设我们已经有一个名为 link 的 DOM 元素，并且需要将其链接设置为 '/about.html'，我们可以这样来实现：
----- ----------- - ------------------------ --------- - -------------------------------- -------------------
其中，location.pathname 表示当前页面的 URL 路径。
在多页面应用程序中使用
在多页面应用程序中，我们希望在一些页面中能够访问到其他页面的链接。以下面的文件夹结构为例：
--- --- - --- ------ - --- ------ --- ---- - --- ------ - --- ------ --- ------------
我们在 a.html 页面中想要访问到 b.html 页面，此时我们可以将 b.html 的路径传入 toUrl 函数中，这样就能生成正确的相对 URL 了：
----- ----------- - ------------------------ ----- --- - ----------------------------- ------------ ----------------- -- -- ----------------
总结
relative-url 是一个方便的 npm 包，通过它我们可以方便快捷地生成相对 URL。本文详细介绍了 relative-url 的安装和使用，并提供了使用场景的示例。希望这篇文章能对大家有所帮助，让大家可以更好地利用 relative-url 这个 npm 包来简化前端开发中的工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedacc7b5cbfe1ea0610b1d