在前端开发中，我们常常需要在页面上添加链接，一些链接是指向本网站内部的，而另一些链接则是指向其他网站的。在添加外部链接时，我们可能会遇到一些问题，比如如何让链接在新窗口或新标签页中打开等等。npm 包 external-links 正是为解决这些问题而设计的。在本篇文章中，我们将介绍 npm 包 external-links 的使用教程，并提供示例代码。
安装 external-links 包
我们首先需要使用 npm 包管理器安装 external-links 包。在命令行中输入以下命令：
npm install --save external-links
使用 external-links 包
使用 external-links 包很简单。只需在 JavaScript 文件中导入 external-links 包并调用该包中的函数即可。下面是一个简单的例子：
import { externalLinks } from 'external-links';
externalLinks();这个例子中，我们使用 import 语句导入 external-links 包，并调用 externalLinks 函数。这个函数会寻找所有页面上的外部链接，将这些链接的 target 属性设置为 "_blank"，这样就可以在新窗口或新标签页中打开链接。
external-links 包提供的选项
external-links 包还提供了一些选项，可以使我们更加灵活地控制其行为。下面是一些常用选项的示例：
域名过滤
你可能不希望所有的外部链接都打开在新窗口或新标签页中。在这种情况下，你可以通过指定允许的域名列表来控制 external-links 包的行为。下面是一个用于过滤 domain.com 和 sub.domain.com 的例子：
import { externalLinks } from 'external-links';
externalLinks({
domains: ['domain.com', 'sub.domain.com']
});包含 id 属性的链接过滤
external-links 包默认会忽略所有带有 id 属性的链接，这些链接通常用于页面内部导航。如果你希望打开这些链接，可以使用 includeIds 选项。下面是一个包含 includeIds 选项的示例：
import { externalLinks } from 'external-links';
externalLinks({
includeIds: true
});排除特定链接的过滤
如果你想排除某些链接，比如社交媒体链接或某些特定链接，可以使用 excludeLinks 选项。下面是一个排除包含 "facebook.com" 和 "linkedin.com" 域名的链接的示例代码：
import { externalLinks } from 'external-links';
externalLinks({
excludeLinks: ['facebook.com*', 'linkedin.com*']
});综合示例
下面是一个综合使用 external-links 包的示例代码：
import { externalLinks } from 'external-links';
externalLinks({
domains: ['domain.com', 'sub.domain.com'],
includeIds: true,
excludeLinks: ['facebook.com*', 'linkedin.com*']
});在这个示例中，我们使用了 domains 选项来设定不希望打开在新窗口或新标签页中的外部链接。我们同时还使用了 includeIds 选项来打开包含 id 属性的链接，以及 excludeLinks 选项来排除我们不希望被打开的链接。
总结
npm 包 external-links 可以帮助我们更加灵活地控制网页上的外部链接。我们可以通过该包提供的选项来过滤特定链接、指定允许的域名列表、打开包含 id 属性的链接等等。在使用 external-links 包时，我们只需要导入该包并调用相应的函数即可。本篇文章提供了详细的使用教程，并提供了示例代码，希望对您学习和使用 external-links 包有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573a481e8991b448e99ef