NPM-Package

NPM/Node 常用软件包

npm-pack-all 打离线安装包

https://www.npmjs.com/package/npm-pack-all

npm-pack-all 是一个用于将 Node.js 项目的依赖项打包成 .tgz 文件的工具，其核心功能是将项目中的生产依赖（dependencies）和开发依赖（devDependencies）递归打包，便于离线分发或部署。

全局安装 npm-pack-all
npm install -g npm-pack-all

使用场景

离线环境部署：在无网络连接的环境中，通过 .tgz 文件安装依赖（npm install artifact.tgz）。
私有库/组件分发：将团队内部私有库打包后分发给成员，确保版本一致性。

npm-pack-all 与 npm pack 的区别：

npm pack 仅打包当前目录的模块（如项目自身代码），不处理依赖项。
npm-pack-all 递归打包所有依赖项，生成包含完整依赖树的 .tgz 文件。

npm-check-updates

npm-check-updates
https://www.npmjs.com/package/npm-check-updates

npm-check-updates(NCU) 更新 package.json 中的依赖到最新版本，忽略指定的版本号。

全局安装 npm-check-updates

npm install -g npm-check-updates

ncu 检测版本更新

进入 package.json 所在目录，执行 ncu 检查 package.json 中依赖的可用版本更新
这里以 hexo 为例：

# ncu
Checking /home/centos/git/hexo/package.json
[====================] 12/12 100%

 hexo                     ^3.9.0  →  ^5.4.0
 hexo-deployer-git        ^0.1.0  →  ^3.0.0
 hexo-generator-archive   ^0.1.4  →  ^1.0.0
 hexo-generator-category  ^0.1.3  →  ^1.0.0
 hexo-generator-index     ^0.2.0  →  ^2.0.0
 hexo-generator-tag       ^0.2.0  →  ^1.0.0
 hexo-renderer-ejs        ^0.2.0  →  ^1.0.0
 hexo-renderer-marked     ^1.0.1  →  ^4.0.0
 hexo-renderer-stylus     ^0.3.1  →  ^2.0.1
 hexo-server              ^0.2.0  →  ^2.0.0
 hexo-tag-bootstrap        0.0.8  →   0.2.1
 hexo-wordcount           ^2.0.1  →  ^6.0.1

Run ncu -u to upgrade package.json

ncu -u 更新package.json

进入 package.json 所在目录，执行 ncu -u 可以更新 package.json 中的依赖版本到最新。
之后再执行 npm install 根据 package.json 中的版本号更新依赖包。

注意：ncu -u 只是更新 package.json 文件中的版本号，并不是真的安装依赖包的新版本，之后还需执行 npm install 来安装更新。

ncu -g 检查全局包更新

elasticdump

https://www.npmjs.com/package/elasticdump

serve HTTP 服务器

https://www.npmjs.com/package/serve

serve 一个极简、零配置的静态 HTTP 服务器，专门用于在本地开发和测试环境（甚至简单的演示环境）中快速地托管静态网站（HTML, CSS, JS, 图片等）或单页应用程序(SPA)。

核心目的：取代配置复杂的 Web 服务器（如 Apache 或 Nginx 进行本地开发设置），让你一键启动一个本地服务器来预览你的静态文件或构建产物。

通常全局安装，方便在任意目录使用：
npm install -g serve

常用参数：
-s, --single 将所有不存在的 URL 重写为指定的文件（默认是 /index.html）
-p, --port, -l, --listen 指定端口

serve 启动服务器（托管当前目录），默认端口是 3000（如果 3000 被占用会自动尝试其他端口）。访问 http://localhost:3000 即可

serve ./dist 指定目录启动
serve -l 8080 指定端口启动

http-server HTTP 服务器

https://www.npmjs.com/package/http-server

http-server 是一个基于 Node.js 的、零配置的命令行 HTTP 服务器。它非常适合快速搭建本地环境来测试静态网站、单页应用（SPA）或任何 HTML/CSS/JavaScript 项目。它轻量、易用，且支持许多常用功能。

全局安装 http-server

npm install -g http-server

http-server 命令会在当前目录启动 http 服务器，监听 8000 端口，打开 http://127.0.0.1:8080/ 页面，可看到：

如果目录内有 index.html 文件则加载并显示 index.html 页面
如果目录内没有 index.html 文件，显示目录内的文件列表，可下载文件，也就是文件浏览器

直接执行 http-server 命令的输出：

# http-server
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://172.21.202.29:8080
Hit CTRL-C to stop the server

可选参数
-p --port 指定服务器监听的端口

http-server -p 3000  # 在 3000 端口启动 http 服务器

-d 指定根目录路径（相对于命令运行位置或绝对路径）

http-server ./dist/          # 服务当前目录下的 dist 子目录
http-server /home/user/site  # 服务绝对路径目录

Puppeteer 浏览器操作

https://www.npmjs.com/package/puppeteer

npm i puppeteer

@mozilla/readability 网页正文提取

https://www.npmjs.com/package/@mozilla/readability
https://github.com/mozilla/readability

@mozilla/readability 是 Mozilla 开源的 JavaScript 库，用于从 HTML 页面中提取可读内容（如文章正文、标题等），过滤无关元素（广告、导航栏等）。
它是 Firefox 浏览器『阅读模式』的核心算法，适用于网页内容抓取和无干扰阅读场景。

特性：

智能内容提取：通过分析 DOM 结构、标签密度和语义特征，识别文章主体内容
噪音过滤：自动移除广告、评论区、侧边栏等非核心元素
元数据解析：提取文章标题、作者、发布日期、缩略图和摘要等信息
纯文本处理：支持输出格式化的 HTML 或纯文本内容
轻量无依赖：纯 JavaScript 实现，无外部依赖，适用于 Node.js 和浏览器环境

安装

npm install @mozilla/readability
npm install jsdom  # 通常搭配 jsdom 使用

实用示例：

const { Readability } = require('@mozilla/readability');
const { JSDOM } = require('jsdom');

// 示例：从HTML字符串中提取内容
const html = `...`; // 输入你的HTML字符串或从文件/网络获取
const dom = new JSDOM(html);
const reader = new Readability(dom.window.document);
const article = reader.parse();

console.log(article.title);     // 文章标题
console.log(article.content);   // 文章正文（HTML格式）
console.log(article.textContent); // 纯文本内容
console.log(article.excerpt);    // 摘要
console.log(article.byline);      // 作者信息
console.log(article.siteName);    // 网站名称

https://www.npmjs.com/package/js-cookie
https://github.com/js-cookie/js-cookie

npm i js-cookie

iziToast Toast通知

https://github.com/marcelodolza/iziToast

https://marcelodolza.github.io/iziToast/

<!-- 头部 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
<!-- 页面底部 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>

// 默认配置
iziToast.settings({
    position: 'topRight',           // 默认显示位置：右上角
    timeout: 3000,                  // 默认显示时间：3000毫秒（3秒）
    resetOnHover: true,             // 鼠标悬停时重置计时器
    transitionIn: 'fadeInLeft',     // 进入动画：从左淡入
    transitionOut: 'fadeOutRight',  // 退出动画：向右淡出
    closeOnClick: true,             // 点击关闭
    progressBar: true,              // 显示进度条
    layout: 1,                      // 布局样式：1表示纯色背景
    theme: 'light',                 // 主题：亮色
    maxWidth: 300                   // 最大宽度：300像素
});

// 几种预置通知类型
iziToast.info({...})    // 蓝色信息通知
iziToast.success({...}) // 绿色成功通知
iziToast.warning({...}) // 橙色警告通知
iziToast.error({...})   // 红色错误通知

// 自定义通知
iziToast.show({
  title: '提示',
  message: '这是来自 iziToast 的通知!',
  position: 'topCenter',
  timeout: 3000,
  progressBar: true,
  closeOnClick: true,
  backgroundColor: '#17a2b8',
  theme: 'dark'
});

常用参数：
title: 通知标题
message: 通知内容
position: 位置 (默认 bottomRight，支持 topRight, topCenter, bottomCenter 等)
timeout: 自动关闭时间（默认 5000 毫秒）
color: 通知背景色

FingerprintJS 浏览器指纹

https://github.com/fingerprintjs/fingerprintjs

https://fingerprintjs.github.io/fingerprintjs/

本地和服务器运行生成指纹不同问题

问题：
在同一台电脑的同一个 chrome 浏览器上访问包含 fingerprintjs 计算指纹的页面，通过本地启动服务 localhost:8000 和部署到 Linux 服务器后通过域名 http://devgou.com/ 访问，发现计算的设备指纹不同

排查及原因：
分别打开 localhost:8000 和 http://devgou.com/ 的浏览器控制台
把 fingerprintjs 指纹计算的结果在浏览器控制台输出

const fp = await FingerprintJS.load();
const result = await fp.get();

对比 components 中各个组件的属性，发现下面这些属性在两个环境中是不同的：

audio, canvas, colorGamut, contrast, deviceMemory, domBlockers, fontPreferences, fonts, screenFrame

解决：
不要使用默认的指纹生成方法，手动排除一些不稳定的动态组件，从而保持2个环境中生成的浏览器指纹相同。

代码如下：

// 稳定指纹检测函数
const getStableFingerprint = async () => {
  try {
    // 动态加载指纹库
    const script = document.createElement('script');
    script.src = 'https://openfpcdn.io/fingerprintjs/v4/iife.min.js';
    script.crossOrigin = 'anonymous';
    
    // 等待库加载完成
    await new Promise((resolve, reject) => {
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
    
    // 初始化指纹库
    const fp = await FingerprintJS.load();
    
    // 获取指纹结果
    const result = await fp.get();
    
    // 排除不稳定组件
    const {
      audio, canvas, colorGamut, contrast, deviceMemory,
      domBlockers, fontPreferences, fonts, screenFrame,
      ...stableComponents
    } = result.components;
    
    // 生成稳定指纹
    const stableVisitorId = FingerprintJS.hashComponents(stableComponents);
    
    // 返回结果
    return {
      originalVisitorId: result.visitorId,
      stableVisitorId,
      confidence: result.confidence,
      components: Object.keys(stableComponents)
    };
    
  } catch (error) {
    console.error('指纹检测失败:', error);
    return null;
  }
};

// 执行测试并显示结果
getStableFingerprint().then(result => {
  if (result) {
    console.log('✅ 稳定指纹:', result.stableVisitorId);
    console.log('🔒 原始指纹:', result.originalVisitorId);
    console.log('📊 使用的组件:', result.components.join(', '));
    console.log('⚖️ 置信度:', result.confidence.score);
  }
});

生成指纹时排除指定组件

排除指定组件的官方示例代码
https://github.com/fingerprintjs/fingerprintjs/blob/master/docs/extending.md

// ...

const result = await fp.get()

// The `languages` and `audio` components will be excluded
const { languages, audio, ...components } = result.components

// Optionally, you can make a visitor identifier from your custom list of components
const visitorId = FingerprintJS.hashComponents(components)

gray-matter front-matter 解析

https://www.npmjs.com/package/gray-matter
https://github.com/jonschlinkert/gray-matter

将带 front-matter 的文本中的 front-matter 解析为 json 对象，并且能分离 front-matter 和正文部分。

输入文本：

---
title: Hello
slug: home
---
<h1>Hello world!</h1>

解析结果：

{
  content: '<h1>Hello world!</h1>',
  data: {
    title: 'Hello',
    slug: 'home'
  }
}

其中

data 是 front-matter 对象
content 是去除 front-matter 后的内容

遇到了 ReferenceError: Buffer is not defined 问题，改用 front-matter

front-matter

https://www.npmjs.com/package/front-matter
https://github.com/jxson/front-matter

将带 front-matter 的文本中的 front-matter 解析为 json 对象，并且能分离 front-matter 和正文部分。

diff-match-patch

https://www.npmjs.com/package/diff-match-patch
npm install diff-match-patch

Diff Match Patch Myers 差分算法的 js 实现
https://github.com/google/diff-match-patch

diff

https://www.npmjs.com/package/diff
https://github.com/kpdecker/jsdiff

也是基于 Myers 差分算法实现的文本 diff

在线演示
http://incaseofstairs.com/jsdiff/

diffChars/diffWords/diffLines 文本差异计算

和 diff-match-patch 一样，这几个 diff 函数的结果也是把 oldStr 转换为 newStr 的操作步骤：

diffChars(oldStr, newStr[, options]) 
diffWords(oldStr, newStr[, options])
diffLines(oldStr, newStr[, options])

上面几种 diff 函数的返回结果都是 ChangeObject 对象数组，每个 ChangeObject 对象包含 4 个字段：

str value 字符串值
bool added 值为 true 表示 value 需要插入到 newStr
bool removed 值为 true 表示 value 需要从 oldStr 中删除
int count 操作 token 个数（字符、单词、行）

注意：
如果 added 和 removed 都是 undefined，表示 value 是相同内容，不需要变换。
count 的具体含义取决于使用的 diff 函数：

diffChars 的结果中 count 是字符数量
diffWords 的结果中 count 是单词数量
diffLines 的结果中 count 是行数量

结果示例：

[
  {
    value: "Hello",     // 当前片段的文本内容
    added: undefined,   // 是否为新增内容
    removed: undefined, // 是否为删除内容  
    count: 5           // 包含的token数量（字符数/单词数/行数）
  },
  {
    value: "World",
    added: true,        // 新增内容
    removed: undefined,
    count: 5
  },
  {
    value: "!",
    added: undefined,
    removed: true,      // 删除内容
    count: 1
  }
]

Patch 补丁计算及应用

createTwoFilesPatch(oldFileName, newFileName, oldStr, newStr[, oldHeader[, newHeader[, options]]])
createPatch(fileName, oldStr, newStr[, oldHeader[, newHeader[, options]]])
applyPatch(source, patch[, options])

createTwoFilesPatch 函数中的参数 oldFileName 和 newFileName 仅用于输出结果中的文件头部分(File Headers)展示，可以自定义随意输入，不影响对比字符串。oldStr 和 newStr 才是真正要对比的文本部分。
createPatch 函数是 createTwoFilesPatch 的简化，fileName 参数同时用于 oldFileName 和 newFileName。

createTwoFilesPatch 和 createPatch 会返回一个 unified 格式的 diff patch，和 GitHub 的 Unified Diff Patch 格式基本相同，GitHub 的可视化做得更好。

applyPatch 参数 source 是要应用补丁的原始文本内容，patch 是补丁内容
例如：

import { applyPatch } from 'diff';

const originalText = `function hello() {
    return "Hello World";
}`;

const patch = `--- a/example.js
+++ b/example.js
@@ -1,3 +1,4 @@
 function hello() {
-    return "Hello World";
+    return "Hello GitHub";
 }
+// New comment`;

try {
    const patchedText = applyPatch(originalText, patch);
    console.log('应用成功:', patchedText);
} catch (error) {
    console.log('应用失败:', error);
}

Unified Diff Patch 格式详解

Unified Diff Patch 内容由 3 部分组成，示例如下：

--- a/file1.txt
+++ b/file2.txt
@@ -1,7 +1,8 @@
 Line 1
-Line 2
+Line 2 Modified
 Line 3
 Line 4
+New Line 5
 Line 6
 Line 7

1、文件头 File Headers

--- 开头的是原文件名，后跟原文件路径
+++ 开头的是新文件名，后跟新文件路径

例如

--- a/file1.txt          # 原始文件
+++ b/file2.txt          # 新文件

2、块头 Hunk Header

- 开头的表示原文件的行变更范围, 1,7 表示从第1行开始，有7行涉及变更
+ 开头的表示新文件的行变更范围，1,8 表示从第1行开始，有8行涉及变更

例如

@@ -旧文件起始行,旧文件行数 +新文件起始行,新文件行数 @@ [可选上下文]
- @@ -1,7 +1,8 @@

3、行变更内容

- 开头的行表示要从原文件删除的行，只在原文件出现
+ 开头的行表示要在新文件新增的行，只在新文件出现
空格开头的表示未变化的行，在新旧文件中都有

例如

[空格]  Line 1         # 未变化的行（上下文）
[-]    -Line 2        # 删除的行（只在旧文件中存在）
[+]    +Line 2 Modified # 新增的行（只在新文件中存在）

多块变更

文件有两处不连续的修改，所以分成两个块（hunk）

--- a/example.js
+++ b/example.js
@@ -1,5 +1,6 @@
 function hello() {
-    return "Hello";
+    return "Hello World";
 }
 
+// New comment
 console.log("Test");
@@ -15,3 +16,4 @@
 function goodbye() {
     return "Goodbye";
 }
+// End of file

当前位置 : 首页 » 文章分类 : 开发 » NPM-Package