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

【问题标题】：Can't resolve 'fs' using webpack and react无法使用 webpack 解析“fs”并做出反应
【发布时间】：2018-03-28 06:16:05
【问题描述】：

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

我最终试图为 docxtemplater 读取 .docx 文件，但如果没有 'fs' 工作，它看起来并不明亮。

我曾尝试使用我在许多解决方案中看到的 node:{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,
    }
};

【问题讨论】：

没有“文件系统”可以从中加载数据，所以如果您需要网络上的数据，或者重写您的逻辑，以便您可以通过调用您的服务器来请求该数据，使用浏览器的功能通过<img> 和<link> 等加载资产，或者使用一个特殊的加载器，让你可以将它们捆绑进去。

标签： node.js webpack fs docxtemplater

【解决方案1】：

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

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

This GitHub repo 有一个 Node Core 库的列表，Webpack 已经移植了这些库以供浏览器使用。不幸的是，fs 不是其中之一。

【讨论】：

这对我很有帮助 @peteb -- 谢谢 :)

【解决方案2】：

我来晚了，但这是特定于 docxtemplater 的。

要加载 docx，请在节点中使用 fs，在浏览器中使用 JSZipUtils.getBinaryContent。

查看此演示（来自此处：http://docxtemplater.readthedocs.io/en/latest/generate.html#browser）

<html>
    <script src="docxtemplater.js"></script>
    <script src="jszip.js"></script>
    <script src="vendor/file-saver.min.js"></script>
    <script src="vendor/jszip-utils.js"></script>
    <!--
    Mandatory in IE 6, 7, 8 and 9.
    -->
    <!--[if IE]>
        <script type="text/javascript" src="examples/vendor/jszip-utils-ie.js"></script>
    <![endif]-->
    <script>
    function loadFile(url,callback){
        JSZipUtils.getBinaryContent(url,callback);
    }
    loadFile("examples/tag-example.docx",function(error,content){
        if (error) { throw error };
        var zip = new JSZip(content);
        var doc=new Docxtemplater().loadZip(zip)
        doc.setData({
            first_name: 'John',
            last_name: 'Doe',
            phone: '0652455478',
            description: 'New Website'
        });

        try {
            // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
            doc.render()
        }
        catch (error) {
            var e = {
                message: error.message,
                name: error.name,
                stack: error.stack,
                properties: error.properties,
            }
            console.log(JSON.stringify({error: e}));
            // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
            throw error;
        }

        var out=doc.getZip().generate({
            type:"blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        }) //Output the document using Data-URI
        saveAs(out,"output.docx")
    })
    </script>
</html>

【讨论】：

【解决方案3】：

在 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

【讨论】：

node: { fs: 'empty' } 在 webpack 5 中不再工作