【前后端】Node.js 模块大全

七灵微2025-07-16 12:42

用到的全部总结在这里，不定期更新

  • 链接
    node一本通
    包括：
    express
    path
    fs/
    process/
    os/
    http/
    mysql/mongoose/
    express-jwt/jsonwebtoken/
    dotenv/
    multer/
    swagger/
    cors/
    nodemon (docker篇有)
  • 常用模块
    • 内置
      fs 文件系统操作（读写、重命名等）
      path 路径处理（拼接、解析、扩展名等）
      http 创建 HTTP 服务或客户端
      os 获取操作系统信息（CPU、内存等）
      events 事件驱动机制（监听、触发事件）.
      stream 处理流式数据（文件读写、管道等）.
      crypto 加密、哈希、签名等安全相关功能.
      child_process 创建子进程、执行命令行任务.
      util 工具函数（继承、promisify 等）.
    • 第三方：
      express Web 框架，快速构建 API 服务
      axios 发起 HTTP 请求（支持 Promise）
      dotenv 加载 .env 环境变量配置
      chalk 终端输出彩色文本
      commander 构建命令行工具
      nodemon 自动重启 Node 服务（开发利器）
      jsonwebtoken JWT 鉴权与令牌生成
      mongoose MongoDB ODM，操作数据库更方便
      cors 处理跨域请求
      body-parser 解析请求体（Express 中常用）.
      multer 处理文件上传
      socket.io 实现 WebSocket 实时通信

目录

  • [URL / URLSearchParams/ qs](#URL / URLSearchParams/ qs)
  • [axios 发起 HTTP 请求（支持 Promise）](#axios 发起 HTTP 请求（支持 Promise）)
  • [body-parser 解析请求体（Express 中常用）](#body-parser 解析请求体（Express 中常用）)
  • commander
  • [inquirer 询问 搭配commander](#inquirer 询问 搭配commander)
  • chokidar
  • open
  • chalk
  • socket.io
  • 插件机制

URL / URLSearchParams/ qs

URL / URLSearchParams 是node/浏览器都支持

qs 第三方库，用于处理复杂query（嵌套对象/数组），放入浏览器需要打包（webpack/vite）npm i qs

js 复制代码 
const myURL = new URL('https://example.com:8080/path?a=123&b=456#hash')
console.log(myURL.protocol)  // 'https:'
console.log(myURL.hostname)  // 'example.com'
console.log(myURL.port)      // '8080'
console.log(myURL.pathname)  // '/path'
console.log(myURL.hash)      // '#hash'
console.log(url.search);     // '?a=123&b=456'

const params = url.searchParams;//得到URLSearchParams 实例对象

// 操作 query 参数
myURL.searchParams.set('a', '100')
console.log(myURL.toString()) // https://example.com:8080/path?a=100&b=2#hash

// 遍历 query 参数
for (const [key, value] of myURL.searchParams) {
  console.log(key, value)
}

//正则表达式这种 实际上并不是URL底层原理，因为它覆盖不全、边界出错、可读性差、效率低
const url = 'http://www.example.com/a/index.html?a=123&b=456';
const regex = /^(https?):\/\/([^\/?#]+)(\/[^?#]*)?(\?[^#]*)?(#.*)?$/;

//URLSearchParams
//空值和无值的参数都会被解析为 ''
const params = new URLSearchParams('?name=Alice&age=30');
console.log(params.get('name'));      // "Alice" 
//还有getAll
console.log(params.has('age'));       // true
params.set('age', '31');              // 修改 age 参数
params.append('hobby', 'reading');    // 添加 hobby 参数
console.log(params.toString());       // "name=Alice&age=31&hobby=reading"
/*
.delete(key)	删除指定参数
.sort()	按参数名排序
.entries()	获取所有键值对迭代器
.keys() / .values()	获取所有键或值的迭代器
.forEach()	遍历所有参数
*/

//qs
const qs = require('qs')
// 对象 → query 字符串
const str = qs.stringify({
  a: 1,
  b: [2, 3],
  c: { d: 4 }
})
console.log(str)
// a=1&b[0]=2&b[1]=3&c[d]=4
// 字符串 → 对象
const obj = qs.parse('a=1&b[0]=2&b[1]=3&c[d]=4')
console.log(obj)
// { a: '1', b: ['2', '3'], c: { d: '4' } }

// URL: /search?filter[status]=active&filter[tags][]=js&filter[tags][]=vue
app.get('/search', (req, res) => {
  // 默认 Express 不支持嵌套解析，需要 qs 手动解析
  const filter = require('qs').parse(req.query)
  console.log(filter)
})

axios 发起 HTTP 请求（支持 Promise）

在nodejs 和 js 用法基本一样，但有细节差异

项目 浏览器环境 Node.js 环境
请求底层 使用 XMLHttpRequest 或 fetch 使用 Node 的 http 或 https 模块
Cookie 自动携带 默认携带当前域名下的 Cookie 需要手动设置 withCredentials 或 headers
CORS 跨域限制 受浏览器安全策略限制 不受限制，可自由请求任何地址
文件上传 使用 FormData 需使用 form-data 模块或 Buffer
浏览器特性支持 可显示加载动画、进度条等 需手动实现进度监听逻辑
  • 应用场景
    调用第三方 API：比如天气、支付、地图、AI 接口等
    服务间通信：微服务架构中，一个服务调用另一个服务的接口
    数据同步：定时任务拉取远程数据，写入数据库
    代理转发请求：结合 Express 做 API 网关或中间层
    上传/下载文件：配合 fs 模块处理文件流
    自动化脚本：比如爬虫、批量提交数据、接口测试等
js 复制代码 
//对比 上JS 下node
import axios from 'axios';
axios.get('/api/user')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

const axios = require('axios');
axios.get('https://api.example.com/user')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

axios.get('https://api.example.com/data', {
  withCredentials: true // 允许携带跨域 Cookie
});

axios.get('https://api.example.com/data', {
  headers: {
    Cookie: 'sessionId=abc123' // 手动设置 Cookie
  }
});

const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

const FormData = require('form-data');
const fs = require('fs');
const formData = new FormData();
formData.append('file', fs.createReadStream('./file.jpg'));
axios.post('https://api.example.com/upload', formData, {
  headers: formData.getHeaders()
});

axios.get('/bigfile', {
  onDownloadProgress: progressEvent => {
    console.log(`下载进度: ${progressEvent.loaded} 字节`);
  }
});

axios.get('https://example.com/bigfile', { responseType: 'stream' })
  .then(response => {
    let total = 0;
    response.data.on('data', chunk => {
      total += chunk.length;
      console.log(`下载进度: ${total} 字节`);
    });
  });

body-parser 解析请求体（Express 中常用）

  • 作用：在 Express 中，默认 无法读取 req.body，需要 body-parser 这个中间件来解析
  • 安装npm i ...
    更新：Express 4.16+ 内置了替代方案！从 Express 4.16 起，可以不用单独装 body-parser，直接使用即可，把bodyParser改为express
js 复制代码 
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
  • 使用
js 复制代码 
app.post('/login', (req, res) => {
  console.log(req.body) // ❌ 默认是 undefined
})

const express = require('express')
const bodyParser = require('body-parser')

const app = express()

// 解析 application/json 类型的请求体
app.use(bodyParser.json())

// 解析 application/x-www-form-urlencoded（表单）类型
app.use(bodyParser.urlencoded({ extended: true }))
//统一就写死成true 

app.post('/login', (req, res) => {
  console.log(req.body) // ✅ 正常打印对象
  res.send('登录成功')
})

commander

bash 复制代码 
npm install commander
  • 作用
    命令行工具构建库
    定义命令行命令（如：init、build）
    解析参数（如：--force、-o output）
    自动生成 --help 帮助文档
    监听不同命令的回调函数
  • 使用
js 复制代码 
// cli.js
const { Command } = require('commander')
const program = new Command()

program
  .name('mycli')
  .description('一个自定义 CLI 工具')
  .version('1.0.0')

// 定义命令 mycli init
program
  .command('init')
  .description('初始化项目')
  .option('-f, --force', '是否强制初始化')
  .action((options) => {
  	require('./commands/init')(options)
    console.log('初始化项目，参数:', options)
  })

// 解析命令行参数
program.parse(process.argv)
program.parse() // 默认使用 process.argv
//如果你不调用 program.parse()，命令和选项都不会生效。
program.parse(['node', 'cli.js', 'start', '--debug']);//传入自定义参数

//多个命令
program
  .command('build')
  .description('构建项目')
  .option('-o, --output <path>', '输出路径', './dist')
  .action((options) => {
  	require('./commands/build')(options)
    console.log('构建项目，输出到:', options.output)
  })

// export 命令
program
  .command('export')
  .description('导出 HTML')
  .option('-t, --theme <name>', '使用的主题')
  .action((options) => {
    require('./commands/export')(options)
  })

program.parse()

//默认命令 前提：如前面所示program基本信息和后面命令/参数分开
program
  .action(() => {
    console.log('你没有输入命令，显示帮助：')
    program.help()
  })
//帮助信息自动生成，不需要手动写

//支持传参
program
  .command('add <name>')
  .description('添加一个组件')
  .action((name) => {
    console.log('添加组件:', name)
  })

.command('export [file]')
.action((file, options) => {
  // file 是导出的文件名
})


//package.json中要配置好
"bin": {
  "mycli": "./cli.js"
}
  • 应用：Webpack 和 Vite 本质上就是 CLI（命令行工具），但它们远不止于此------它们不仅是命令行工具，更是构建工具、模块打包器、开发服务器、插件平台、模块解析与优化 、编译器集成。

inquirer 询问 搭配commander

在 commander 中本身不支持交互式选择，它主要用于解析命令行参数。但你可以结合另一个库 ------ inquirer 来实现命令行中的"询问"和"选择"功能，比如让用户选择一个选项、输入文本、确认操作等。

  • 使用
    input 文本输入
    number 数字输入
    confirm 是/否确认
    list 单选列表（上下键选择）
    rawlist 数字选择（输入数字）
    expand 快捷键选择（按字母）
    checkbox 多选列表（空格选择）
    password 密码输入（隐藏字符）
    editor 打开系统编辑器输入内容
    validate: 验证用户输入是否合法
    filter: 处理用户输入（如转成大写）
    when: 条件提问（根据前面回答决定是否提问）
    default: 设置默认值
    transformer: 美化显示内容
js 复制代码 
const { Command } = require('commander');
const inquirer = require('inquirer');

const program = new Command();

program
  .command('init')
  .description('初始化项目')
  .action(async () => {
    const answers = await inquirer.prompt([
      {
        type: 'list',
        name: 'framework',
        message: '请选择你要使用的框架：',
        choices: ['React', 'Vue', 'Svelte'],
      },
      {
        type: 'confirm',
        name: 'typescript',
        message: '是否启用 TypeScript？',
        default: true,
      },
    ]);

    console.log('你的选择：', answers);
  });

program.parse();

chokidar

  • 作用
    高效、跨平台的 文件监听库，基于底层 fs.watch 和 fs.watchFile，但做了大量兼容性增强和性能优化。
  • 使用
事件名 触发时机
add 文件被新增
addDir 文件夹被新增
change 文件内容发生变化
unlink 文件被删除
unlinkDir 文件夹被删除
ready 初始扫描完成
error 出现错误
js 复制代码 
const chokidar = require('chokidar')

// 初始化监听器，监听某个文件或目录
const watcher = chokidar.watch('src/**/*.md', {
  ignored: /(^|[\/\\])\../, // 忽略隐藏文件
  //.开头的隐藏文件 或者是文件夹里面的.开头的隐藏文件
  persistent: true
})

// 监听事件
watcher
  .on('add', path => console.log(`📄 新增文件: ${path}`))
  .on('change', path => console.log(`✏️  文件变动: ${path}`))
  .on('unlink', path => console.log(`❌ 删除文件: ${path}`))

const watcher = chokidar.watch('src', {
  ignored: /node_modules/,
  persistent: true,//持续在后台运行 不自动退出
  ignoreInitial: false,     // 是否忽略第一次加载时触发的 add 事件
  usePolling: false,        // 如果 true，强制使用轮询（性能较差，兼容某些平台）
  interval: 100,            // 轮询间隔（仅当 usePolling 为 true）
  awaitWriteFinish: {
    stabilityThreshold: 200,//多久没有变化就认为写入完成
    pollInterval: 100 //检测写入变化的频率
  }
})

watcher.on('change', (path) => {
  const content = fs.readFileSync(path, 'utf-8')
  socket.emit('update', content) // 配合 socket.io 实现热更新
})
watcher.on('change', (filePath) => {
  const html = render(fs.readFileSync(filePath, 'utf-8'))
  io.emit('reload', html)
})

//自动重新构建
watcher.on('change', (filePath) => {
  build(filePath)
})

open

  • 版本
    open@10+ 默认导出是 ESM（export default），你用 require() 会报错，如果你用的是 type: "module" 或 .mjs，直接 import chalk from 'chalk'
    如果项目是 CommonJS，可以使用 open@9
  • 作用
    Node.js 第三方库，可以帮你 在默认程序中打开 URL、文件、目录、应用程序等。open 会自动判断当前平台（Windows/macOS/Linux）来选择合适的系统调用，无需你手动处理跨平台问题。
    常用于 CLI 工具中，比如 vite 启动后自动打开浏览器：就是用 open('http://localhost:3000') 实现的。
  • 使用
打开类型 示例
打开网页 open('https://google.com')
打开本地文件 open('README.md')
打开本地目录 open('.')
打开应用程序 open('https://google.com', { app: 'firefox' })
选项 作用
app.name 指定打开的应用名（如 chrome, firefox, code, sublime）
app.arguments 传给应用的参数（如打开无痕、指定窗口等）
wait 是否等待程序退出（默认 false）
newInstance 是否强制新开一个程序实例
js 复制代码 
import open from 'open'

// 在默认浏览器中打开 URL
await open('https://example.com')
// 打开项目目录
await open('./my-project')
// 打开 Markdown 文件（默认编辑器或预览）
await open('./README.md')

const open = require('open')
open('https://example.com')

// 打开 VSCode
await open('.', { app: { name: 'code' } })

// 打开 Chrome 并传参
await open('https://example.com', {
  app: {
    name: 'google chrome',
    arguments: ['--new-window']
  }
})

chalk

  • 版本
    从 v5 起，chalk 是 ESM-only（只能用 import），如果你项目是 CommonJS，推荐使用 v4 npm install chalk@4
  • 作用：给 命令行文本添加颜色和样式
  • 使用
js 复制代码 
// ESM 写法（v5+）
import chalk from 'chalk'

// 输出彩色文字
console.log(chalk.green('成功！'))
console.log(chalk.red('错误！'))
console.log(chalk.yellow('警告！'))
console.log(chalk.blue('信息'))
//链式调用
console.log(chalk.bold.red('加粗红色'))
console.log(chalk.bgYellow.black('黑字黄底'))
console.log(chalk.underline.green('下划线绿色'))

//变量定义 封装success/error/info
const error = chalk.bold.red
const warning = chalk.hex('#FFA500') // 自定义颜色（橙色）
console.log(error('出错了！'))
console.log(warning('警告：请检查配置文件'))

const log = console.log
log(chalk.bold.green('✔ 操作成功'))
log(chalk.bold.yellow('⚠ 请检查配置'))
log(chalk.bold.red('✖ 出现错误'))
log.success('成功')
log.error('失败')
log.info('提示')

//模版字符串嵌入颜色
console.log(`这是一个 ${chalk.green('成功')} 的例子`)

socket.io

  • 作用
    Node.js 实时通信库，基于 WebSocket 封装，提供客户端-服务端之间的全双工通信能力，支持自动重连、断线重试、事件通信等。
    Socket.IO 是建立在 HTTP 或 HTTPS 协议之上的，它需要一个底层的服务器对象来挂载 WebSocket 通道。所以你必须提供一个 HTTP Server 实例。
    Socket.IO 必须依附在 HTTP Server 上运行，确实需要一个 HTTP 服务器对象来初始化 Socket.IO，可以手动创建，也可以用 Express 的 app.listen() 返回值来获取。
  • 应用：实时聊天、实时数据推送（如股票/价格更新）、热更新、多人协同编辑
  • 对比
功能 WebSocket 原生 Socket.IO
连接握手 手动管理 自动重连
消息结构 字符串 / 二进制 事件机制
广播支持 ❌ ✅
命名空间 / 房间 ❌ ✅
跨平台/浏览器兼容性 差 好
  • 使用
功能 服务端（socket.io） 客户端（socket.io-client）
连接 io.on('connection', cb) io()
发送消息 socket.emit('event', data) socket.emit('event', data)
接收消息 socket.on('event', cb) socket.on('event', cb)
广播消息 io.emit(...) N/A（由服务端触发）
私发消息 socket.to(id).emit(...) N/A
断开连接 socket.disconnect() socket.disconnect()
js 复制代码 
//服务端
npm install socket.io
//客户端
npm install socket.io-client
或者HTML引入 <script src="/socket.io/socket.io.js"></script>

//两种创建方法 均基于HTTP
//第一种 下面代码中显式导入并创建http server
//第二种 借助app.listen
const express = require('express');
const { Server } = require('socket.io');

const app = express();
const server = app.listen(3000); // 返回的是 HTTP Server 实例
const io = new Server(server);

io.on('connection', socket => {
  console.log('客户端连接成功');
});

//创建服务端
// server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new Server(server, {
  cors: {
    origin: '*'
  }
})

// 监听客户端连接
io.on('connection', (socket) => {
  console.log('客户端已连接:', socket.id);

  // 接收消息
  socket.on('chat message', (msg) => {
    console.log('收到消息:', msg);
    io.emit('chat message', msg); // 广播给所有客户端
  });

  // 断开连接
  socket.on('disconnect', () => {
    console.log('客户端断开:', socket.id);
  });
});

server.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});
html 复制代码 
<!-- 客户端代码 -->
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO 聊天</title>
</head>
<body>
  <input id="input" placeholder="输入消息">
  <button onclick="send()">发送</button>
  <ul id="messages"></ul>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io('http://localhost:3000');

    socket.on('chat message', (msg) => {
      const li = document.createElement('li');
      li.textContent = msg;
      document.getElementById('messages').appendChild(li);
    });

    function send() {
      const input = document.getElementById('input');
      socket.emit('chat message', input.value);
      input.value = '';
    }
  </script>
</body>
</html>
  • 热更新
js 复制代码 
//服务端
// 监听 .md 文件变动后
watcher.on('change', (filePath) => {
  const content = fs.readFileSync(filePath, 'utf-8')
  io.emit('update', content)
})

//客户端
socket.on('update', (html) => {
  document.querySelector('#app').innerHTML = html
})

// ESM 客户端
import { io } from 'socket.io-client'

const socket = io('http://localhost:3000')

socket.emit('hello', 'hi from client')

socket.on('hello', (msg) => {
  console.log('服务端说：', msg)
})

插件机制

  • 作用：支持用户自定义
  • 核心思路
    "插件机制" = 约定接口 + 自动调用
    只需要：
    允许用户传入插件（数组）
    在渲染时循环调用这些插件（钩子）
    插件只要满足某些方法签名就能工作
  • 定义插件格式
js 复制代码 
//sample_plugin.js
module.exports = {
  name: 'my-plugin',
  
  // 在渲染前调用，可修改原始内容
  beforeRender(content, options) {
    return content
  },

  // 渲染为 HTML 后调用，可修改 HTML 字符串
  afterRender(html, options) {
    return html
  }
}
//example
// plugins/copyright-plugin.js

module.exports = {
  name: 'copyright-plugin',

  afterRender(html) {
    return html + `<footer><p style="text-align:center;color:#aaa;">© hello 2025 </p></footer>`
  }
}
  • 修改执行文件来支持插件机制，引入插件加载器.js，用它加载所有插件，循环分别在渲染前/渲染后执行对应函数即beforeRender/afterRender
js 复制代码 
const fs = require('fs')
const path = require('path')
const loadPlugins = require('./plugins')

function operator(filePath, theme = 'default', pluginPaths = []) {
  let Content = fs.readFileSync(filePath, 'utf-8')

  // 加载插件
  const plugins = loadPlugins(pluginPaths)

  // 插件处理原始内容
  for (const plugin of plugins) {
    if (plugin.beforeRender) {
      Content = plugin.beforeRender(Content, { theme })
    }
  }

  const renderer = new xx()
  let NewContent = renderer.render(Content)

  // 插件处理 HTML 内容
  for (const plugin of plugins) {
    if (plugin.afterRender) {
      NewContent = plugin.afterRender(NewContent, { theme })
    }
  }

  const cssPath = `/styles/${theme}.css`
  return `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Preview</title>
  <link rel="stylesheet" href="${cssPath}">
</head>
<body>
  <div class="content">
    ${NewContent}
  </div>
</body>
</html>`
}

module.exports = operator
  • 创建插件加载器
js 复制代码 
//loader.js
const path = require('path')
const fs = require('fs')

function loadPlugins(pluginPaths) {
  const plugins = []
  for (const pluginPath of pluginPaths) {
    const abs = path.resolve(process.cwd(), pluginPath)
    if (fs.existsSync(abs)) {
      const plugin = require(abs)
      plugins.push(plugin)
    } else {
      console.warn(`⚠️ 插件 ${pluginPath} 不存在`)
    }
  }
  return plugins
}

module.exports = loadPlugins
  • 支持命令行传插件
js 复制代码 
//修改CLI支持--plugin参数 可多次
.option('--plugin <path...>', '加载插件')//...是commander里的rest参数
  • 插件注册 API 提供 use() 方法，内部注册插件
    方法封装成类
js 复制代码 
//lib/pluginManager.js
const fs = require('fs')
const path = require('path')

class PluginManager {
  constructor() {
    this.plugins = []
  }

  // 注册插件
  use(plugin) {
    if (typeof plugin === 'object') {
      this.plugins.push(plugin)
    } else {
      console.warn(`插件无效：${plugin}`)
    }
    return this // 支持链式调用
  }

  // 渲染流程，内部挂载插件钩子
  render(filePath, theme = 'default') {
    //封装beforeRender->render->afterRender

    const cssPath = `/styles/${theme}.css`

    return `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Preview</title>
  <link rel="stylesheet" href="${cssPath}">
</head>
<body>
  <div class="content">
    ${htmlContent}
  </div>
</body>
</html>`
  }
}

module.exports = new PluginManager()

//使用
const pluginManager = require('./pluginManager')
// 注册插件
pluginManager
  .use(require('./plugins/copyright-plugin'))
  .use(require('./plugins/toc-plugin'))
// 渲染
const html = pluginManager.render(filePath, theme)

//复用
const pluginManager = require('../lib/pluginManager')
// 注册所有传入的插件
if (options.plugin && options.plugin.length) {
  for (const pluginPath of options.plugin) {
    const abs = path.resolve(process.cwd(), pluginPath)
    const plugin = require(abs)
    pluginManager.use(plugin)
  }
}
if (options.export) {//导出渲染
  const html = pluginManager.render(filePath, options.theme)
  fs.writeFileSync(options.export, html)
} else {
  // 启动服务器时也用 pluginManager.render()
}
  • 插件系统生命周期钩子 init、beforeRender、afterRender、onError
    Node.js 本身并没有统一的"插件生命周期钩子"机制，不像 Webpack、Fastify、Nuxt 等框架那样提供标准化的钩子系统。但在 Node.js 的生态中，很多框架和工具都实现了自己的插件机制和生命周期钩子。
    把这些插件自带的钩子都补进 pluginManager.render() 中，非常好扩展。
生命周期钩子名 触发时机 是否异步支持
init(options) 插件初始化时 支持
beforeRender(content, options) 渲染前 支持
afterRender(html, options) 渲染后 支持
onError(err) 渲染出错时 支持
onFinish() 渲染流程结束 支持
js 复制代码 
  use(plugin) {
    if (plugin && typeof plugin === 'object') {
      // 调用 init 钩子
      if (typeof plugin.init === 'function') {
        try {
          plugin.init()
        } catch (e) {
          console.warn(`插件 ${plugin.name} 初始化失败:`, e)
        }
      }
      this.plugins.push(plugin)
    }
    return this
  }

 catch (err) {
      console.error(`❌ 渲染失败: ${err.message}`)

      // 错误钩子
      for (const plugin of this.plugins) {
        if (typeof plugin.onError === 'function') {
          try {
            plugin.onError(err)
          } catch (e) {
            console.warn(`插件 ${plugin.name} onError 失败：`, e)
          }
        }
      }
    }
    // 渲染完成钩子
    for (const plugin of this.plugins) {
      if (typeof plugin.onFinish === 'function') {
        try {
          plugin.onFinish()
        } catch (e) {
          console.warn(`插件 ${plugin.name} onFinish 失败：`, e)
        }
      }
    }
//....
module.exports = new PluginManager()

// plugins/dev-logger.js
module.exports = {
  name: 'dev-logger',

  init() {
    console.log('[dev-logger] 插件已加载')
  },

  beforeRender(content) {
    console.log('[dev-logger] 渲染前内容长度：', content.length)
    return content
  },

  afterRender(html) {
    console.log('[dev-logger] 渲染后 HTML 长度：', html.length)
    return html
  },

  onError(err) {
    console.error('[dev-logger] 渲染异常：', err)
  },

  onFinish() {
    console.log('[dev-logger] 渲染流程完成 🎉')
  }
}
  • 插件默认目录 自动加载 ./plugins/*.js
    封装自动加载逻辑
js 复制代码 
//lib/loadLocalPlugins.js

const path = require('path')
const fs = require('fs')

function loadLocalPlugins() {
  const pluginsDir = path.resolve(process.cwd(), 'plugins')
  const pluginList = []

  if (!fs.existsSync(pluginsDir)) return []

  const files = fs.readdirSync(pluginsDir)

  for (const file of files) {
    const ext = path.extname(file)
    if (ext === '.js') {
      const fullPath = path.join(pluginsDir, file)
      try {
        const plugin = require(fullPath)
        pluginList.push(plugin)
      } catch (e) {
        console.warn(`⚠️ 插件加载失败：${file}`, e)
      }
    }
  }

  return pluginList
}

module.exports = loadLocalPlugins

//控制加载顺序
//在插件文件中加一个 order 字段
module.exports = {
  name: 'copyright',
  order: 10,
  afterRender(html) {
    return html + '<footer>© 2025</footer>'
  }
}
//loadLocalPlugins里排序
pluginList.sort((a, b) => (a.order || 0) - (b.order || 0))

搭配上之前的手动传参，实现自动手动一起加载

  • 插件配置文件 支持读取 .previewrc 配置文件加载插件
    让用户通过项目根目录的 .previewrc 文件自动配置插件和主题，避免复杂命令行参数。
json 复制代码 
//支持JSON格式
{
  "theme": "hacker",
  "plugins": [
    "./plugins/copyright-plugin.js",
    "./plugins/toc-plugin.js"
  ]
}
js 复制代码 
//配置读取模块 lib/loadConfig.js

const fs = require('fs')
const path = require('path')

function loadConfig() {
  const configPath = path.resolve(process.cwd(), '.previewrc')
  if (!fs.existsSync(configPath)) return {}

  try {
    const raw = fs.readFileSync(configPath, 'utf-8')
    const config = JSON.parse(raw)
    return config
  } catch (e) {
    console.warn('⚠️ 配置文件 .previewrc 加载失败:', e.message)
    return {}
  }
}

module.exports = loadConfig

//调用加载配置并合并参数
// 加载 .previewrc
const rc = loadConfig()

// 合并 theme 设置（命令行优先生效）
const theme = options.theme || rc.theme || 'default'

// 加载插件（来自 CLI 参数 + .previewrc + plugins/ 目录）
const allPlugins = [
  ...(rc.plugins || []),
  ...(options.plugin || [])
]
相关推荐
五点六六六4 小时前
cli中的@/components/utils是怎么被替换的成对应的alias的？
前端·前端框架·node.js
听听你说的--9 小时前
Windows 安装 nvm-windows（Node.js 版本管理器）
windows·node.js
秃头女孩y13 小时前
mac安装nvm执行命令报错-解决方案
macos·node.js·bash
集成显卡1 天前
基于 Node.js 的 API 方式接入深度求索Deepseek、字节跳动豆包大模型
前端·人工智能·node.js
HexCIer1 天前
cbT.js: 一个让模板继承变得优雅的 Node.js 模板引擎
javascript·node.js
Q_Q5110082851 天前
python的小学课外综合管理系统
开发语言·spring boot·python·django·flask·node.js
ChongYu重玉1 天前
【node/vue】css制作可3D旋转倾斜的图片，朝向鼠标
javascript·css·vue.js·经验分享·笔记·node.js·vue
前端双越老师1 天前
使用 langChain.js 实现 RAG 知识库语义搜索
人工智能·langchain·node.js
植物昂光1 天前
基于Node.js的微博热榜抓取与展示开发记录
前端·node.js
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04《深入设计模式》模式结构汇总05使用Ruby接入实时行情API教程06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07LOT: 通过逻辑增强大型语言模型的零样本Chain-of-Thought推理能力08集群聊天服务器---MySQL数据库的建立09DeepSeek各版本说明与优缺点分析10【无标题】