找不到模块：错误：无法解析模块“ fs”

Question

我正在使用Babel和Webpack开发一个React应用，我想使用file-existsnpm中的软件包。我已经安装了该软件包并将其保存为项目的依赖项。运行npm start后，出现此错误：

./~/file-exists/index.js中的错误找不到
模块：错误：无法在C：\ GitHub \ CryptoPrices \ node_modules \ file-exists
@ ./~/file-exists/index.js中解析模块'fs' 3：9-22

file-exists使用fs的依赖，但由于某种原因，它不工作。如果我不需要Npm，Npm可以正常启动和运行file-exists。

这是我的webpack配置文件：

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      // exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

我是Webpack和Babel的新手，所以我有点迷路。

Answer 1

看来您正在文件中调用该fs file-exists方法index.js。我不确定在什么上下文中调用该方法，但这看起来像是对服务器端方法的客户端调用。我最近遇到了类似的问题。

据我了解，主要问题似乎是您无法在浏览器解释的客户端（前端）代码中调用服务器端（节点）方法。您必须从服务器调用它们。

Webpack可以将fs模块代码加载到您的前端，但是浏览器实际上无法解释这些Node方法并运行它们。只有Node环境可以做到这一点。（更多在这里）

您可以通过修改对fs方法的调用来解决核心问题，使其发生在服务器端，或者找到等效的浏览器支持的程序包，该程序包提供与所需fs方法相同的功能，但可以在浏览器中运行。

快速搜索“用于浏览器的fs模块”会弹出各种可能满足您需要的选项，例如fs-web，browserify-fs或filer。

这是一个有一些见解的类似问题。 在React.js，node.js，webpack，babel，express中使用fs模块

Answer 2

node: {
  fs: 'empty'
}

尝试将上面的代码添加到您的 webpack 配置文件中，错误应该会消失。