npm 包 @segment/canonical 使用教程

前言

在 Web 开发过程中，我们经常需要处理网页的地址、链接和搜索引擎优化等问题。这些问题涉及到规范化、合并和排序 URL，这时候我们可以使用 npm 包 @segment/canonical 来解决这些问题。

@segment/canonical 是一个轻量级的 npm 包，提供了一组工具函数来处理 URL，适用于浏览器端和 Node.js 环境。本文将介绍 @segment/canonical 的使用方法，包括安装、基本使用、配置选项等内容。

安装

要使用 @segment/canonical，首先需要在项目中安装它。可以使用 npm 或 yarn 进行安装：

npm install @segment/canonical --save

或者：

yarn add @segment/canonical

基本使用

使用 @segment/canonical 很简单，只需要导入相应的工具函数即可。可以使用 ES6 的 import 语法或者 CommonJS 的 require 语法导入工具函数，具体使用方法如下：

// ES6 的 import 语法
import { normalizeUrl, mergeUrls } from '@segment/canonical';

// CommonJS 的 require 语法
const { normalizeUrl, mergeUrls } = require('@segment/canonical');

normalizeUrl

normalizeUrl() 函数用于规范化 URL，将其转换为标准格式。如果 URL 缺少协议头（如 https://），该函数会默认使用 https://。如果 URL 包含非法字符，该函数会进行编码。

const url1 = 'example.com/foo/bar?aa=bb#cc';
const url2 = 'http://example.com/foo/bar?aa=bb#cc';
const url3 = 'https://example.com/foo/bar?aa=bb#cc';

normalizeUrl(url1); // 'https://example.com/foo/bar?aa=bb#cc'
normalizeUrl(url2); // 'http://example.com/foo/bar?aa=bb#cc'
normalizeUrl(url3); // 'https://example.com/foo/bar?aa=bb#cc'

mergeUrls

mergeUrls() 函数用于合并多个 URL，返回最终的 URL。该函数会将两个 URL 合并成一个，并自动清理重复的斜线、参数和哈希值等内容。合并的 URL 顺序从左到右，因此参数和哈希值等内容以最后一个 URL 为准。

const baseUrl = 'https://example.com';
const path1 = '/foo/bar';
const path2 = 'baz';

mergeUrls(baseUrl, path1, path2); // 'https://example.com/foo/bar/baz'

配置选项

@segment/canonical 还提供了一些配置选项，可以根据需要进行设置。配置选项分为全局配置和单次调用配置两种，分别适用于不同的场景。

全局配置

全局配置是指应用于所有使用 @segment/canonical 的模块和函数。可以在应用程序的任何一个模块中设置全局配置，这样所有模块都会生效。全局配置通过设置 process.env 对象中的 CANONICAL_* 环境变量来实现。

目前支持的环境变量包括：

• CANONICAL_DEFAULT_PROTOCOL：默认的协议头（如 https://）。
• CANONICAL_STRIP_HASH：是否去除哈希值（true 或 false）。
• CANONICAL_STRIP_TRAILING_SLASH：是否去除路径末尾的斜线（true 或 false）。

例如，在 Node.js 环境中，可以使用以下代码设置全局配置：

process.env.CANONICAL_DEFAULT_PROTOCOL = 'https://';
process.env.CANONICAL_STRIP_HASH = 'true';
process.env.CANONICAL_STRIP_TRAILING_SLASH = 'true';

单次调用配置

单次调用配置是指针对某个函数或方法，临时设置一些配置选项。可以在调用函数或方法时传入第二个参数，用于设置单次调用配置。

normalizeUrl(url, {
  protocol: 'https://',
  stripHash: true,
  stripTrailingSlash: true,
});

总结

@segment/canonical 提供了一组实用的工具函数，用于规范化和合并 URL，方便我们处理网页地址、链接和 SEO 问题。本文介绍了 @segment/canonical 的安装、基本使用和配置选项等内容，希望能对你在 Web 开发中的工作有所帮助。

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