如何在浏览器中调用Node.js定义的myFunction函数？

问题背景 #

需求为：在浏览器中点击按钮时，触发Node.js里定义的myFunction函数。

遇到的问题 #

• 使用browserify打包后无效果，访问localhost/index.html时，浏览器控制台提示myFunction未定义
• 本地WAMP环境下，index.js在Node终端可正常运行
• 取消注释myFunction后执行browserify index.js > bundle.js打包出现错误

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
    <p>
        Input the order of the matrix
        <br />
        <input type="text" maxlength="3" name="value" id='valuee' value='5'/>
    </p>
    <button id="myButton">Click me!</button>
</body>
<script type="text/javascript" src="bundle.js"></script>
</html>

index.js（Node终端可正常运行版本） #

const fs = require('fs')
const express = require('express');

function readDb(dbName = 'db.csv') {
    // read JSON object from file
    const data = fs.readFileSync(dbName, 'utf8')
    return JSON.parse(data)
}

function writeDb(obj, dbName = 'db.csv') {
    if (!obj) return console.log('Please provide data to save')
    try {
        fs.writeFileSync(dbName, JSON.stringify(obj))
        return console.log('SAVE SUCESS')
    } catch (err) {
        return console.log('FAILED TO WRITE')
    }
}

//function myFunction(){

const dataObj = {james:'144114'}
writeDb(dataObj)

module.exports = { readDb, writeDb }
console.log('You are on the browser');

//}
//else {
//   console.log('You are on the server');
//  }

解决方案 #

核心问题：浏览器环境无法直接执行Node.js专属API（如fs文件系统模块），Browserify仅能打包CommonJS模块，无法将Node专属API转换为浏览器可运行的代码。正确做法是通过前后端分离实现：

步骤1：搭建Node.js服务器（server.js） #

将文件操作逻辑放在服务器端，通过接口供前端调用：

const express = require('express');
const fs = require('fs');
const app = express();
const port = 3000;

// 解析JSON请求体
app.use(express.json());

function readDb(dbName = 'db.csv') {
    const data = fs.readFileSync(dbName, 'utf8')
    return JSON.parse(data)
}

function writeDb(obj, dbName = 'db.csv') {
    if (!obj) return { success: false, msg: 'Please provide data to save' }
    try {
        fs.writeFileSync(dbName, JSON.stringify(obj))
        return { success: true, msg: 'SAVE SUCCESS' }
    } catch (err) {
        return { success: false, msg: 'FAILED TO WRITE' }
    }
}

// 定义接口，供前端触发文件操作
app.post('/api/write-data', (req, res) => {
    const result = writeDb(req.body);
    res.json(result);
});

// 托管前端静态文件
app.use(express.static('public'));

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

步骤2：修改前端代码（public/index.html） #

将前端文件放入public目录，通过fetch请求调用服务器接口：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body>
    <p>
        Input the order of the matrix
        <br />
        <input type="text" maxlength="3" name="value" id='valuee' value='5'/>
    </p>
    <button id="myButton">Click me!</button>

    <script>
        document.getElementById('myButton').addEventListener('click', async () => {
            try {
                const dataObj = { james: '144114' };
                const response = await fetch('/api/write-data', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(dataObj),
                });
                const result = await response.json();
                console.log(result.msg);
            } catch (err) {
                console.error('请求失败:', err);
            }
        });
    </script>
</body>
</html>

步骤3：运行项目 #

1. 确保db.csv文件存在（可创建空文件或写入初始JSON内容）
2. 启动服务器：node server.js
3. 访问http://localhost:3000，点击按钮即可触发服务器端的文件写入逻辑

错误原因分析 #

• 浏览器没有文件系统访问权限，无法执行Node.js的fs模块，导致Browserify打包失败
• Browserify打包后，模块内的函数不会自动暴露到全局作用域，因此浏览器找不到myFunction
• 前后端运行环境完全独立，不能直接将Node端代码打包到浏览器运行

内容的提问来源于stack exchange，提问作者Web Design