想在 vue/webpack HMR 触发 reload 的时候用 Nodejs 执行一个脚本应该怎么做？

发布于 1周前 作者 ionicwang 来自 nodejs/Nestjs

想在 vue/webpack HMR 触发 reload 的时候用 Nodejs 执行一个脚本应该怎么做？
请教大家一个 vue/webpack 的问题。

我现在在用 vue 开发一个项目，想要每次修改一个 json 文件的时候通过一个 js 脚本从这个 json 文件生成另外两个 json 文件放到 public 目录中，应该怎么做？

我理解这可能需要把这个 js 脚本改造成一个 loader。不知道有没有现成的解决方案？

Harmonyos Next教程
13 回复

fs.watch


#1 能不能具体说说应该怎么做。我这个需求感觉类似是一次编译，就像把 less 编译成 css 并保存，我是要把 1 个 json 编译成 2 个 json 并保存。

Chokidar。chokidar 是一个基于 node.JS 的监听文件夹改变模块
node 本身能够执行 js 脚本.
node 下 fs 模块,是一个文件系统.

以上 3 点完全能够支撑这个需求.

1 楼提到的 fs.watch 也能实现文件监听,Chokidar 只是封装了下.

#4 文件监听 webpack 本身就有的功能，监听应该不是问题。我主要是想做一个 hook，想要让 webpack 在文件发生变化时自动执行一个脚本。

在 webpack 中实现的话写个 loader 来处理，配置 rule match 到这个文件，好处是不用另开个命令行。不用 webpack 的话如上面写个文件 watch。

用 express 中间件 webpack-dev-middleware , 可以拿到 webpack 的 compiler 实例, 监听 compiler.watch 事件不知道能不能解决

写个 loader 是最简单的。配置 match 让这个 json 过这个 loader，loader 不处理内容只用副作用生成文件。

https://www.webpackjs.com/api/compiler-hooks/ 把你的 js 脚本扔到 webpack 钩子里,你自己看看那个钩子合适.

写个 webpack 的插件呗

webpck-nodemon

感觉这位老哥方案比较稳

在 Vue/Webpack 开发环境中，利用 Hot Module Replacement (HMR) 触发重新加载时执行一个 Node.js 脚本，可以通过监听 Webpack Dev Server 的事件来实现。以下是一个简单的实现步骤：

  1. 配置 Webpack Dev Server： 确保你的 Webpack 配置中启用了 HMR，并且有一个 Dev Server 配置。

    // webpack.config.js
module.exports = {
    // 其他配置...
    devServer: {
        hot: true,
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
};

  2. 监听 HMR 事件： 在你的 Vue 组件或入口文件中，监听 HMR 事件，并通过某种方式（如 WebSocket 或 HTTP 请求）通知 Node.js 服务器。

    if (module.hot) {
    module.hot.accept(() => {
        console.log('Module updated, notifying Node.js...');
        // 发送通知到 Node.js 服务器，例如通过 fetch 或 WebSocket
        fetch('http://localhost:3000/reload-script');
    });
}

  3. 在 Node.js 服务器上监听通知： 创建一个简单的 Node.js 服务器，监听来自 Webpack Dev Server 的通知并执行脚本。

    // server.js
const express = require('express');
const app = express();
const { exec } = require('child_process');

app.get('/reload-script', (req, res) => {
    exec('node your-script.js', (error, stdout, stderr) => {
        if (error) {
            console.error(`exec error: ${error}`);
            return res.status(500).send('Error executing script');
        }
        console.log(`stdout: ${stdout}`);
        console.error(`stderr: ${stderr}`);
        res.send('Script executed');
    });
});

app.listen(3000, () => console.log('Server running on port 3000'));

这样，每当 Webpack 触发 HMR 更新时，Node.js 服务器就会执行指定的脚本。

回到顶部