ReactJS with Webpack：Uncaught ReferenceError：require is not defined

问题描述：

下面是我的webpack.config.js。在浏览器开发人员工具中，获取“Uncaught ReferenceError：require is not defined”ReactJS with Webpack：Uncaught ReferenceError：require is not defined

如果删除“target”：“node”，则会抛出错误“Uncaught TypeError：fs.readFileSync is not a function”。

var config = { 
    entry: './main.js', 

    output: { 
     filename: './index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 
    node: { 
    fs: "empty" 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    }, 
    target: 'node' 
} 
module.exports = config;

我没有看到你的webpack配置有任何特别的问题。也许你应该提供一些给出错误的代码文件？ – atomrc

是要在浏览器或节点中使用的编译代码吗？你还可以提供一个main.js的片段吗？ – roughcoder

为什么你需要这个节点：{ fs：“empty” }， and target：node？ – VivekN

答

您需要一个来自节点的本地模块，并试图在浏览器中使用它。在这种情况下，您需要fs。

如果您正在为一个浏览器的代码，那么你无法使用节点fs.readFileSync和你不应该使用target: 'node'

我可以用下面的main.js文件重新创建您的问题。

const fs = require('fs'); 

const test = function() { 
    console.log('this is a test'); 
    var contents = fs.readFileSync('DATA', 'utf8'); 
} 

test();

如果你想使用一个额外的文件浏览器中，那么你可以：

需要在构建

文件这将永久用食指附带的文件的数据例如使用require的.js文件。这是完全可以接受的，如果内容是一些配置，并且不会改变每个用户，例子是语言文件等。这种方法可以增加您的资产文件，并在文件内容很大时达到首次加载速度。

const data = require('some-data.json`) 
console.log(data) // would output the JSON

AJAX内容

使用Ajax /取你可以调用在页面加载的文件的内容。如果这个文件是为每个访问者独特的，那么你将需要这样做。

感谢您的回复。 – user2130898

使用此方法，如何更新some-data.json？ – user2130898

您正在编写的代码是否需要在浏览器中运行？如果是这样，那么你需要编写2个应用程序 - 例如1个，对于Node来说是1个。通常的做法是React应用程序可以通过API与Node应用程序交谈。 Express Js是构建这些API的常见Node框架。虽然注意你的API可以用任何服务器端语言编写 - 它不需要是Node。希望这可以帮助你。 – roughcoder

ReactJS with Webpack：Uncaught ReferenceError：require is not defined

相关推荐