npm 包 posthtml-urls 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

NPM 是 Node.js 软件包管理器，可以用来安装、分享、发现和重用 JavaScript 的模块。在前端开发中，我们经常会使用大量的第三方包来帮助我们完成任务。posthtml-urls 就是一个很好的 npm 包，可以帮助我们处理 HTML 中的 URL。

posthtml-urls 是什么

PostHTML 是一个 HTML 的标记语言解析器。它编写在 JavaScript 中，并可以作为一个 Node.js 包使用。posthtml-urls 是 PostHTML 的插件之一，它旨在为 HTML 中的 URL 提供更多的操作和自定义能力。

posthtml-urls 可以帮你完成以下工作：

将相对路径转为绝对路径
提供 base 参数的支持
提供路径处理函数的支持

安装

npm install posthtml posthtml-urls --save-dev

使用

安装完成后，在项目中新建一个 posthtml.config.js 的配置文件，并加入以下内容：

const posthtml = require("posthtml");
const urls = require("posthtml-urls");

posthtml([
  urls({
    eachURL: (url) => {
      return { url: 'http://cdn.example.com/' + url };
    }
  })
])
  .process(html, { /* Options */ })
  .then(result => console.log(result.html));

这个例子中我们只是简单使用了 http://cdn.example.com/ 拼接了所有 URL。当然，你可以添加任何其他的逻辑来自定义 URL 的输出。

参数

filter: 一个正则表达式，来筛选需要转化的 URL。例如 //assets// 可以仅仅将 assets 相关的 URL 进行处理。
base: 一个基本 URL ，默认情况下为实际 HTML 文件所在的目录。
eachURL: 一个用来处理每一个 URL 的函数。能够接收到一个 url 字符串，并返回一个包含 url 属性的对象。
attrs: 需要处理的属性列表。默认会处理 href, src, srcset。

示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <img src="./img/pic1.jpg">
  <a href="../index.html">Home</a>
  <script src="./js/main.js"></script>
</body>
</html>

const posthtml = require("posthtml");
const urls = require("posthtml-urls");

const html = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Example</title></head><body><img src="./img/pic1.jpg"><a href="../index.html">Home</a><script src="./js/main.js"></script></body></html>';

posthtml([
  urls({
      base: 'http://example.com/',
      eachURL: (url) => {
        return { url: 'http://cdn.example.com/' + url };
      }
  })
])
  .process(html, { /* Options */ })
  .then(result => console.log(result.html));

/*
 输出结果：
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <img src="http://cdn.example.com/img/pic1.jpg">
  <a href="http://example.com/../index.html">Home</a>
  <script src="http://cdn.example.com/js/main.js"></script>
</body>
</html>
*/

结论

posthtml-urls 是一个非常方便的 npm 包，可以帮助开发者快速地处理 URL。希望通过本篇教程能够对 posthtml-urls 的使用有更深入的了解，从而提升前端开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e1fb81d47349e53d46