Node.js和React.js應用程序之間的差異

Question

我在javascript中有一段代碼看起來像這樣：

var fs = require('fs');

var subscriptions = []

var array = fs.readFileSync('optimal.csv', 'utf8').toString().split("\r");
for (i in array) {
    stock = array[i].split(':')[0];
    if (stock)
        subscriptions.push(stock)
}

當我說：

node .\realtime.js

讀取文件“ optional.csv”沒有問題。

但是，如果我將同一段代碼復制到使用create-react-app構建的react.js應用create-react-app並嘗試運行它，則會出現錯誤：

TypeError: fs.readFileSync is not a function

當我這樣運行時：

npm run start

var fs = require('fs');

// Grid data as an array of arrays
const quoteList = [];
var i = 0;
var stock;

var array = fs.readFileSync('optimal.csv').toString().split("\r");
    for (i in array) {
        stock = array[i].split(':')[0];
        if (stock)
            quoteList.push(stock)
    }

• 從純React應用程序讀取.csv文件的正確方法是什么？

Answer 1

fs是由node.js實現的模塊，而javascript本身未提供。 也許其他環境也提供了fs ，但是react只是像fs這樣的模塊，而不是其他環境，因此它不能提供額外的模塊

另一件事， react代碼在瀏覽器中運行，您希望fs指向哪里？ 讀取每個用戶的文件系統？

如果您想讀取本地的csv文件。 您可以使用諸如Webpack之類的捆綁程序，該捆綁程序可以將csv文件捆綁到您的輸出Javascript文件中。 如果您要閱讀本地的 csv，則可以執行以下操作

const csv =require('/path/to/csv')

也許您需要一些插件，因為create-react-app可能不提供csv加載器

這是從csv文件獲取json的步驟

1. npm run eject在項目根目錄中npm run eject
2. npm install --save dsv-loader
3. 在config下打開webpack.config.dev.js
4. 在module>loaders>exclude(line 110) ，在列表中添加/\\.csv$/
5. 在module>loaders {test: /\\.csv$/,loader: 'dsv-loader'}添加{test: /\\.csv$/,loader: 'dsv-loader'}條目
6. 重新運行npm start
7. require('path/to/csv')將返回json
8. 如果需要生產包，請在webpack.config.prod.js上執行相同的操作