node 简单实现打包后推送系统通知,自动打开项目文件夹

场景

不知道大家有没有遇到过打包时间较长的项目,又想在第一时间把dist包发给后端又不想一直盯着cli的情况,那能不能在打包完成后能自动推送系统通知和帮我启动文件资源管理器呢,今天就用node-notifier来快速实现一下🚀。

ps:项目集成CI/CD的掘友可能就不需要了🤡

方案

  1. ✨推荐使用插件 unplugin-build-notifier (npmjs.com) ,支持 Vite、Webpack、Nuxt 等主流框架及Windows、MacOS、Linux系统
  2. 使用node-notifier-cli能快速实现简单需求
  3. 写一个基于node-notifier的node脚本来完成一些自定义需求

✨unplugin-build-notifier

该插件使用简单,直接下载引入即可,图片、消息、行为均可配置,默认点击通知以及通知超时未操作则打开当前项目文件夹。

这里以vite项目为例,其它框架示例可查看 unplugin-build-notifier (npmjs.com)

Install

css 复制代码
npm i unplugin-build-notifier -D

Usage

ts 复制代码
// vite.config.ts
import BuildNotifier from 'unplugin-build-notifier/vite'

export default defineConfig({
  plugins: [
    BuildNotifier({ /* options */ }),
  ],
})

Options

ts 复制代码
/**
 * plugin options.
 */
interface Options {
  /**
   * The message to display in the build notifier.
   */
  message?: string

  /**
   * The path to the icon to display in the build notifier.
   */
  iconPath?: string

  /**
   * The callback function to execute when the build notifier is clicked.
   */
  click?: () => void

  /**
   * The callback function to execute when the build notifier times out.
   */
  timeout?: () => void
}

node-notifier-cli

这个使用也很简单直接在package.json配置一下命令即可,不过该方法在打包完成后会有一点延迟才能推送通知,且不能自定义通知点击和超时行为,所以更推荐使用unplugin-build-notifier插件。

Install

css 复制代码
npm i [-g] node-notifier-cli

Usage

用 && 符可在前面命令执行完后接着执行build-notifier-cli

json 复制代码
// package.json
"build": "xxxx && npm run build-notifier-cli",
"build-notifier-cli": "notify -t 'Hello' -m 'My message'",

更多参数可查看 node-notifier-cli (npmjs.com)

node-notifier

如果需要高度自定义通知消息和行为,那就自己写一个node脚本吧。 以下是简单示例实现打包完成时推送系统通知,自动打开项目文件夹功能,想要更完善的代码可参考 unplugin-build-notifier (github.com),核心代码也才 80 行。

1. 在项目根目录中创建 scripts

js 复制代码
├── scripts
├── ├── icon
│   ├── ├── SpongeBob.jpg
├── ├── buildNotifier.js

2. buildNotifier.js 核心代码

js 复制代码
import { basename, dirname, join, resolve } from 'node:path'
import { exec } from 'node:child_process'
import { fileURLToPath } from 'node:url'
import notifier from 'node-notifier'

// 获取当前目录
const __dirname = dirname(fileURLToPath(import.meta.url))
// 获取项目根目录
const rootPath = resolve(__dirname, '../')

// Windows系统 用shell命令打开当前项目文件夹
function startdir() {
  exec(`start "" "${rootPath}"`, (error, stdout, stderr) => {
    if (error) {
      console.error(
        `exec error: ${error}\nstdout: ${stdout}\nstderr: ${stderr}`,
      )
    }
  })
}

// node-notifier 配置消息和行为
function buildNotifier() {   
  notifier.notify({
    title: `✨ ${basename(rootPath)}`,
    message: `🎉 build success!\n${rootPath}`,
    icon: join(__dirname, './icon/SpongeBob.jpg'),
  })
  notifier.on('click', startdir)
  notifier.on('timeout', startdir)
}

buildNotifier()

3. 配置命令

用 && 符可在前面命令执行完后接着执行buildNotifier.js

json 复制代码
// package.json
"build": "xxxx && node ./scripts/buildNotifier.js",

更多配置信息可查看 node-notifier (npmjs.com)

总结

以上方法都是不错的选择,如果需求符合个人推荐使用unplugin-build-notifier通过插件集成到项目中,而node-notifier-clinode-notifier 通过配置命令的方式实现会在打包完成后存在一些延迟才推送通知,当然如果需要的话也可以通过node-notifier自行封装插件。

相关推荐
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
uncleTom6662 小时前
前端地图可视化的新宠儿:Cesium 地图封装实践
前端
lemonzoey2 小时前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆2 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W2 小时前
uniapp全局状态管理实现方案
前端
Vertira2 小时前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL3 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全