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;

來源

2017-06-22 user2130898

我沒有看到你的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 /取你可以調用在頁面加載的文件的內容。如果這個文件是爲每個訪問者獨特的，那麼你將需要這樣做。

來源

2017-06-22 10:27:10 roughcoder

感謝您的回覆。 – 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

回答

相關問題