Javascript 在React.js、node.js、webpack、babel、express中使用fs模块

我有一个要求，我在其中渲染视图，并在其中显示表单。在提交表单时，我需要收集表单数据并创建一个文件，并将表单数据保存为该文件中的JSON。我正在使用React.js、node.js、babel和webpack

在努力实现这一点后，我发现我必须使用同构或通用javascript，即在服务器端使用react和render，因为我们不能在客户端使用fs模块。

我使用以下命令运行它：

npm run start

在此之后，我可以在控制台中看到，

[Object Object]

从下面的react组件（HomePage.js）的第1行打印到控制台上。但稍后当我访问此页面时，会出现一个错误：

'bundle.js:18未捕获错误：找不到模块“fs”'

如何将fs模块与react一起使用？

以下是代码片段：

webpack.config.js

“严格使用”；
const debug=process.env.NODE_env！==“生产”；
const webpack=require（'webpack'）；
const path=require（'path'）；
module.exports={
devtool:调试？“内联源映射”：null，
条目：path.join（uu dirname，'src'，'app client.js'），
开发服务器：{
是的，
港口：3333，
contentBase:“src/static/”，
历史上的倒退：正确
},
输出：{
path:path.join（uu dirname，'src'，'static'，'js'），
公共路径：“/js/”，
文件名：“bundle.js”
},
模块：{
装载机：[{
测试：path.join（uu dirname，'src'），
加载器：['babel-loader']，
查询：{
//cacheDirectory:“babel_缓存”，
预设：调试？['react'，'es2015'，'react hmre']：['react'，'es2015']
}
}]
},
插件：调试？[]：[
新的webpack.DefinePlugin({
'process.env.NODE_env'：JSON.stringify（process.env.NODE_env）
}),
新建网页包.optimize.dedueplugin（），
新建webpack.optimize.OccurenceOrderPlugin（），
新建webpack.optimize.UglifyJsPlugin({
压缩：{警告：错误}，
曼格尔：没错，
sourcemap:false，
美化:假,，
死亡代码：正确
}),
]
};错误
首先，让我们稍微回顾一下您的错误：

当您不使用
npm run build
或
npm run start
时，您将不会使用webpack，因此
require
语句不会被
fs
模块的内容所取代，而是留下一条require语句，您的浏览器无法理解该语句，因为require是一个仅用于节点的函数。因此，不需要定义有关的错误

如果您确实使用
npm run build
或
npm run start
运行，则webpack会取出该require语句，并将其替换为
fs
模块。但是，正如您所发现的，
fs
在客户端不起作用

选择
因此，如果您不能使用
fs
保存文件，您能做什么

如果试图将文件保存到服务器，则必须将表单中的数据提交到节点服务器，节点服务器可以使用
fs
与服务器的文件系统交互以保存文件

如果您试图在本地保存表单，即在与浏览器相同的设备上保存表单，则需要使用其他策略，如或使用客户端库，如。您选择哪个选项在某种程度上取决于您的用例，但如果您试图在客户端保存，您可以搜索“从web浏览器保存文件”或“从客户端保存文件”以查看哪些选项适合您。
当您拖放要上载的文件时，dropbox会做什么？他们当然会将该文件存储在服务器上，但不使用服务器端渲染。您需要的是两层应用程序体系结构。