Question

我正在使用Babel和Webpack创建一个反应应用程序，我想使用来自npm的file-exists包。我已经安装并保存了包作为我的项目的依赖项。运行npm start后，我收到此错误：

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

file-exists使用fs作为依赖项，但由于某种原因它无效。如果我在任何地方都不需要file-exists，Npm就会启动并运行，没有任何问题。

这是我的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方法。我不确定你在什么上下文中调用该方法，但这看起来像是对服务器端方法的客户端调用。我最近遇到了类似的问题。

据我所知，主要问题似乎是你不能在浏览器解释的客户端（前端）代码中调用服务器端（Node）方法。你必须从服务器上调用它们。

Webpack可以将fs模块代码加载到您的前端，但浏览器实际上无法解释这些Node方法并运行它们;只有Node环境才能做到这一点。 (more here)

您可以修改核心问题，方法是修改对fs方法的调用，使其发生在服务器端的某个位置，或者找到一个等效的浏览器支持的软件包，它提供与fs方法相同的功能需要但可以在浏览器中运行。

快速搜索“浏览器的fs模块”会显示各种可能适合您所需的选项，例如fs-web，browserify-fs或filer。

这是一个类似的问题，有一些见解。 Use fs module in React.js,node.js, webpack, babel,express

Answer 2

node: {
  fs: 'empty'
}

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

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

2 个答案: