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

问题描述

我目前正在尝试将传入的输入数据从表单转换为可以存储在 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,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,exports){
const button = document.querySelector("button");
let fs = require('fs');

function submit() {

let obj = {
   table: []
};

fs.writeFile('test.json',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]);

解决方法

你不能用fs写文件，你只能用它来读文件，而Browserify只能在一定程度上做到这一点。该代码可能在 Node 中工作，但在浏览器中不起作用，因为没有可将文件写入的文件系统。

browserify browserify browserify filesystems javascript json