无法使用 webpack 解析“fs”并做出反应

Question

当我尝试为节点服务器构建应用程序时，我不断收到描述中的错误。

我最终试图读取 docxtemplater 的 .docx 文件，但如果没有“fs”工作，它看起来就不那么明亮。

我尝试使用在许多解决方案中看到的节点：{fs：“empty”}解决方法，但当我在浏览器上运行它时，它仍然给我相同的错误或传播到控制台。

这是我的 webpack.config.js 中的内容：

var path = require('path');
var webpack = require('webpack');
//var HtmlWebpackPlugin = require('html-webpack-plugin');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');

const sourcePath = path.join(__dirname, './front_end');
const buildPath = path.join(__dirname, './src/bin');

module.exports = {
    devtool: 'source-map',
    //home directory for webpack must be absolute
    //context: sourcePath,
    //Application Execution and Webpack Bundling
    entry: {
        js: path.join(sourcePath, 'index.js')
        //html: './index.html',
    },
    output: {
        //Must be absolute path
        path: sourcePath,
        //publicPath: buildPath,
        //publicPath: path.join(__dirname, '/src/bin'),
        filename: "bundle.js"
    },

    resolve: {
        extensions: [
            '.webpack-loader.js',
            '.web-loader.js',
            '.loader.js',
            '.js',
            '.jsx'
        ],
        modules: [
            path.join(__dirname),
            "node_modules"
        ],
    },
    module: {
        rules: [
            {
                test: /\.js$|\.jsx$/,
                exclude: /node_modules/,
                use: [
                    "babel-loader",
                    "eslint-loader",
                ]
            },
            {
                test: /\.html/,
                exclude: /node_modules/,
                use: [
                    "file-loader",
                ]
            },
            {
                test: /\.css/,
                exclude: /node_modules/,
                use: [
                    "style-loader",
                    'css-loader'
                ]
            },
            {
                test: /\.(gif|png)/,
                exclude: /node_modules/,
                use: [
                    "url-loader"
                ]
            }
        ],
        loaders: [
            {
                test: /\.js$|\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2016', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader',
                use: ['style-loader', 'css-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: "file?name=[name].[ext]"
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            }
        ]
    },
    plugins: [
     ],
    stats: {
        assets: true,
        colors: true,
        errors: true,
        errorDetails: true,
        hash: true,
    }
};

Answer 1

您无法在浏览器中使用 Node Core API 附带的任何模块，它们在那里不起作用。Node Core 模块依赖于浏览器中不存在的 C/C++ 二进制文件。因此，您需要找到一种等效的方法来替换fsReact 应用程序中的任何用途。

一种方法是通过 Node JS 后端通过 HTTP 将您想要使用的文件提供给您的 React 应用程序。fs您可以在 Node 服务器中使用读取文件，并将该逻辑放置在路由中，通过 HTTP 从 React 应用程序调用该路由并将其流式传输回来。然后，您将在 React 应用程序中拥有文件数据，并可以根据需要使用它。

此 GitHub 存储库包含 Webpack 已移植以供浏览器使用的 Node 核心库的列表。不幸的fs是不是其中之一。

Answer 2

在package.json中添加

  "browser": {
    "crypto": false,
    "fs": false,
    "path": false,
    "os": false,
    "net": false,
    "stream": false,
    "tls": false
    },

在webpack中添加：

node: { fs: 'empty' },
  devtool: options.devtool,
  target: 'web', // Make web variables accessible to webpack, e.g. window