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

2018-06-12 20:16:41

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

在努力实现这一点之后，我发现我必须使用同构或通用JavaScript，即在服务器端使用react和render，因为我们无法在客户端使用fs模块。将其称为服务器端。

我运行它使用： npm run start

在此之后，我可以在控制台中看到[Object Object]从下面的反应组件（HomePage.js）的第1行打印在控制台上。但后来当我访问这个页面时，它给出了一个错误：

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

我如何使用fs模块进行反应？

以下是代码片段：

webpack.config.js

"use strict";

const debug = process.env.NODE_ENV !== "production";

const webpack = require('webpack');
const path = require('path');

module.exports = {
  devtool: debug ? 'inline-sourcemap' : null,
  entry: path.join(__dirname, 'src', 'app-client.js'),
  devServer: {
    inline: true,
    port: 3333,
    contentBase: "src/static/",
    historyApiFallback: true
  },
  output: {
    path: path.join(__dirname, 'src', 'static', 'js'),
    publicPath: "/js/",
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: path.join(__dirname, 'src'),
      loader: ['babel-loader'],
      query: {
        //cacheDirectory: 'babel_cache',
        presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
      }
    }]
  },
  plugins: debug ? [] : [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      mangle: true,
      sourcemap: false,
      beautify: false,
      dead_code: true
    }),
  ]
};

错误

首先让我们仔细检查一下你的错误：

当你不使用npm run build或者npm run start ，你不会使用webpack，因此require语句不会被fs模块的内容取代 - 而是留下一个require语句，浏览器不明白，因为require是一个Node-only函数。因此，你的错误需要不被定义。

如果您使用npm run build或npm run start ，则webpack将取出该需求语句并将其替换为fs模块。但是，正如你发现的那样， fs在客户端不起作用。

备择方案

所以，如果你不能使用fs来保存文件，你可以做什么？

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

如果您尝试在本地保存表单，即与浏览器位于同一设备上，则需要使用另一种类似的策略或使用客户端库（如FileSaver）。你选择哪一个选项取决于你的用例，但是如果你试图在客户端保存，你可以搜索“从web浏览器保存文件”或者“保存文件客户端”来查看哪些是适合你的。

链接地址: http://www.djcxy.com/p/36693.html

上一篇: Use fs module in React.js,node.js, webpack, babel,express

下一篇: How do I open my jQuery modal as wide as my elements but no wider?