react中如何使用fs模块？

Question

react项目使用webpack打包，可以直接require node中的path模块。
但是require('fs')的时候会报错：

网上查了下，在webpack.config里加了这段配置：

node:{
        fs:'empty'
    },

这时编译可以通过，但是使用时fs={}，使用会报错。

有看到说可以使用browserify的，只使用webpack不能在前端使用fs模块吗？

Answer 1

由于js可以运行在浏览器也可能是node。本质上node和浏览器都是javascript运行时。

因此首先你要明白一点就是你的代码最终是运行在哪的, 是浏览器还是node。

这也就是为什么webpack有target这个配置的原因。 详情： https://webpack.js.org/concep...

明白了你的代码最终运行在哪就好办了，如果是node，直接修改webpack target配置即可。 webpack便不会对fs等node内置模块进行打包。如果是浏览器， 那你就要好好思考一下了，为什么需要在浏览器中使用fs这个模块。

当然还有一种情况就是你需要在本地中使用fs读取文件，然后真正打包的时候不打包进去，那么你可以通过webpack的 definePlugin来完成。

希望我的回答可以帮助到你，谢谢～

Answer 2

对node不是很熟，简单实用而已。但是fs是node提供的模块，只能在node环境中才能执行相关方法，如果你的react是要运行在浏览器的，那这里是不可能调用fs模块的，因为浏览器并没有提供fs相关api。在 webpack 执行时候可以使用fs是因为webpack本身是运行在node环境中的，不要把node环境和浏览器环境弄混了。