javascript - 尝试使用具有 webpack 的 React App 从 Web 浏览器将配置设置保存到用户计算机上的 JSON 文件？

Question

我正在应朋友的要求为他们开发一个社交媒体应用程序，该应用程序应该允许他们创建类别，然后编写与这些类别相对应的主题标签。之后，他们可以只选择它们，而不是每次都花时间将它们全部输入。

鉴于项目的不断更新性质，我为自己设置了一个 react 网络应用程序，并认为我可以将类别和主题标签存储在 .JSON 文件中，然后在他们添加新类别/主题标签时，我可以写信给那个 .JSON 文件。

问题是，使用“fs”会给我这个错误Cannot find module "fs"，而关于外部或目标节点或其他方法的解决方案总是会导致Uncaught ReferenceError: require is not defined引用 fs 的 .JSX 文件

我在下面链接了我的 webpack。我想保存到本地计算机文件系统上的 .JSON 文件，这样我就不必处理/支付某种在线存储空间。我不想使用下载命令，因为我不想打开该对话框，而是希望将文件写入后台的静态位置。同样，我认为网页将是实现应用程序的好方法，因为当它被构建时，他们可以从 github 下载并在他们喜欢的浏览器中打开 index.html。如果有另一种不那么令人头疼的选择，我完全愿意听取建议。

var path = require('path')
const mode = process.env.NODE_ENV
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack')

module.exports = {
  mode: 'development',
  entry: path.join(__dirname,'./index.js'),
  output:{
  path: path.resolve(__dirname, 'build'),
  filename: 'bundle.js',
  },
  devServer:{
    publicPath: '/build/',
    port:8080,
    hot: true,
  },
  plugins: [ new MiniCssExtractPlugin(), new webpack.HotModuleReplacementPlugin() ],
  
  module:{
    rules: [
      { 
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
      loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env','@babel/preset-react']
          } 
        }
      },

      {
        test: /\.s[ac]ss$/i,
        use: [
  
          // Creates `style` nodes from JS strings
          //'style-loader',
          MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
        } 
    ]
  }
}

为更加清晰而编辑

标签： javascriptjsonwebpackfs