无法使用 node.js 文件系统和 browserify 将数据传递到 JSON 文件答案

【问题标题】：cannot pass data to a JSON file using node.js file-system & browserify无法使用 node.js 文件系统和 browserify 将数据传递到 JSON 文件
【发布时间】：2021-01-06 15:44:00
【问题描述】：

我目前正在尝试将传入的输入数据从表单转换为可以存储在 JSON 文件中的数据，我基本上是在尝试使用没有后端来存储数据的表单。

我正在使用 Node.JS 模块“fs”|| “文件系统”

我也使用 Browserify 进行捆绑，因为我知道为了使用“require('fs')”，它需要在节点环境中，并且需要使用捆绑器才能使其在浏览器中工作，这就是我需要。

在使用实际表单进行测试之前，我通过创建一个按钮构建了一个测试环境，一旦单击，就会使用 node.js 文件系统将数据从我的 main.js 文件中的对象推送到我的 test.JSON 文件，但我我遇到了以下错误：

bundle.js:16 Uncaught TypeError: fs.writeFile is not a function
    at HTMLButtonElement.submit (bundle.js:16)

另外，调用后我没有看到任何源代码被捆绑到我的 bundle.js 文件中

browserify main.js -o bundle.js

我用一个简单的 ramda 函数对此进行了测试，以查看 browserify 应该如何嵌入代码，但在使用文件系统时我没有得到相同的结果。

index.html

<!-- index.html -->
<!doctype html>
<html>
    <head>
        <style>         
    body {
        background-color: #636363;
    }
    section {
        height: 80vh;
        width: 100%;
        display: grid;
        justify-content: center;
    }

    div {
        text-align: center;
        margin: auto;
    }

    button {
        padding: 40px;
        font-size: 2rem;
        width: 150px;
    }
    </style>
    </head>
    <body>
        <section>
            <div>
                <button>Add to JSON</button>
            </div>
        </section>
        <script src="main.js"></script>
        <script src="bundle.js"></script>
    </body>
</html>

main.js

const button = document.querySelector("button");
let fs = require('fs');

function submit() {

let obj = {
   table: []
};

fs.writeFile('test.json', 'utf8');

fs.readFile('test.json', 'utf8', function readFileCallback(err, data){
    if (err){
        console.log(err);
    } else {
    obj = JSON.parse(data); 
    obj.table.push({id: 2, square:3}); 
    json = JSON.stringify(obj); 
    fs.writeFile('test.json', 'utf8'); 

}

button.addEventListener("click", submit);

bundle.js

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){

},{}],2:[function(require,module,exports){
const button = document.querySelector("button");
let fs = require('fs');

function submit() {

let obj = {
   table: []
};

fs.writeFile('test.json', 'utf8');

fs.readFile('test.json', 'utf8', function readFileCallback(err, data){
    if (err){
        console.log(err);
    } else {
    obj = JSON.parse(data);
    obj.table.push({id: 2, square:3});
    json = JSON.stringify(obj);
    fs.writeFile('test.json', 'utf8');
}});

}

button.addEventListener("click", submit);

},{"fs":1}]},{},[2]);

【问题讨论】：

标签： javascript node.js json filesystems browserify

【解决方案1】：

你不能用fs来写文件，你只能用它来读文件，这只是在一定程度上用Browserify做的。该代码可能在 Node 中运行，但在浏览器中无法运行，因为没有文件系统可将文件写入其中。

【讨论】：