javascript - 带有 Webpack 的 ReactJS : Uncaught ReferenceError: require is not defined

Question

下面是我的 webpack.config.js。在浏览器开发者工具中，得到“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;

Answer 1

您需要来自 Node 的 native 模块并尝试在您的浏览器中使用它。在这种情况下，您需要 fs。

如果您正在为浏览器编写代码，那么您将无法使用 Node 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 将文件的数据永久地与您的 index.js 文件一起发送。如果内容是一些配置并且不会因用户而异，例如语言文件等，这是完全可以接受的。如果文件内容很大，此方法可以增加您的 Assets 文件并达到首次加载速度。

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

AJAX 内容

使用 Ajax/Fetch，您可以在页面加载时调用文件的内容。如果此文件对于每个访问者来说都是唯一的，那么您将需要这样做。