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)

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