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

读取文件＆＃39; optional.csv＆＃39;。

没有问题

但是，如果我将相同的代码段复制到使用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)
    }

从纯粹的反应应用程序中读取.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的步骤

npm run eject
npm install --save dsv-loader
在webpack.config.dev.js

config

在module>loaders>exclude(line 110)下添加/\.csv$/列表
在{test: /\.csv$/,loader: 'dsv-loader'}

module>loaders

重新运行npm start
require('path/to/csv')将返回json
如果您需要生产包

webpack.config.prod.js

Node.js和React.js应用程序之间的差异

1 个答案: