Node.js Can'；t解决'；财政司司长'；使用webpack和react

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

我最终尝试为docxtemplater读取一个.docx文件，但如果“fs”不起作用，它看起来就不亮了

我曾经尝试过使用node:{fs:“empty”}变通方法，这是我在许多解决方案中看到的，但是当我在浏览器上运行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,
    }
};

---

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

fs

一种方法是通过HTTP将要处理的文件通过Node JS后端提供给React应用程序。您可以在节点服务器中使用

fs

读取文件，并将该逻辑放在路由中，通过HTTP从React应用程序调用该路由并将其流回。然后，您将在React应用程序中拥有文件数据，并可以根据需要使用它

---

具有Webpack为浏览器使用而移植的节点核心库的列表。不幸的是，

fs

不是其中之一。

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

fs

一种方法是通过HTTP将要处理的文件通过Node JS后端提供给React应用程序。您可以在节点服务器中使用

fs

读取文件，并将该逻辑放在路由中，通过HTTP从React应用程序调用该路由并将其流回。然后，您将在React应用程序中拥有文件数据，并可以根据需要使用它

---

具有Webpack为浏览器使用而移植的节点核心库的列表。不幸的是，

fs

不是其中之一。

我要迟到了，但这是docxtemplater特有的

要加载docx，可以在节点中使用

fs

，在浏览器中使用

JSZipUtils.getBinaryContent

查看此演示（从这里开始：）

函数加载文件（url，回调）{
getBinaryContent（url，回调）；
}
loadFile（“examples/tag example.docx”，函数（错误，内容）{
if（error）{throw error}；
var zip=新的JSZip（内容）；
var doc=new Docxtemplater（）.loadZip（zip）
doc.setData({
名字：“约翰”，
姓：“Doe”，
电话：0652455478，
描述：'新网站'
});
试一试{
//呈现文档（将所有出现的{first_name}替换为John，{last_name}替换为Doe，…）
render（）文件
}
捕获（错误）{
变量e={
消息：error.message，
name:error.name，
stack:error.stack，
属性：error.properties，
}
log（JSON.stringify（{error:e}））；
//当使用JSON.stringify（它包含属性对象）记录时，此处抛出的错误包含其他信息。
投掷误差；
}
var out=doc.getZip（）.generate({
键入：“blob”，
mimeType:“application/vnd.openxmlformats of icedocument.wordprocessingml.document”，
})//使用数据URI输出文档
saveAs（out，“output.docx”）
})

我要迟到了，但这是docxtemplater特有的

要加载docx，可以在节点中使用

fs

，在浏览器中使用

JSZipUtils.getBinaryContent

查看此演示（从这里开始：）

函数加载文件（url，回调）{
getBinaryContent（url，回调）；
}
loadFile（“examples/tag example.docx”，函数（错误，内容）{
if（error）{throw error}；
var zip=新的JSZip（内容）；
var doc=new Docxtemplater（）.loadZip（zip）
doc.setData({
名字：“约翰”，
姓：“Doe”，
电话：0652455478，
描述：'新网站'
});
试一试{
//呈现文档（将所有出现的{first_name}替换为John，{last_name}替换为Doe，…）
render（）文件
}
捕获（错误）{
变量e={
消息：error.message，
name:error.name，
stack:error.stack，
属性：error.properties，
}
log（JSON.stringify（{error:e}））；
//当使用JSON.stringify（它包含属性对象）记录时，此处抛出的错误包含其他信息。
投掷误差；
}
var out=doc.getZip（）.generate({
键入：“blob”，
mimeType:“application/vnd.openxmlformats of icedocument.wordprocessingml.document”，
})//使用数据URI输出文档
saveAs（out，“output.docx”）
})

外接程序包.json

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

加载项网页包：

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

外接程序包.json

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

加载项网页包：

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

没有用于加载数据的“文件系统”，因此，如果您需要web上的数据，请重写您的逻辑，以便您可以通过调用服务器请求该数据，使用浏览器的功能通过

和

等加载资产，或者使用一个特殊的加载程序将其捆绑在一起。没有用于加载数据的“文件系统”，因此，如果您需要web上的数据，可以重写您的逻辑，以便您可以通过调用服务器来请求该数据，使用浏览器的功能通过

和

等加载资产，或者使用一个特殊的加载程序来绑定资产