使用 webpack 时节点找不到模块“fs”

Posted 2023-03-08

【中文标题】使用 webpack 时节点找不到模块“fs”

【英文标题】：Node cannot find module "fs" when using webpack

【发布时间】：2017-01-08 00:31:57

【问题描述】：

我正在使用 node.js 和 webpack 创建一个包。根据我的阅读，node.js 应该包含用于管理文件的fs 模块。然而，当我打电话给require("fs") 时，我得到一个Cannot find module "fs" 错误。我该怎么办？

【参考方案1】：

我自己在捆绑 webpack 时遇到了这个问题，并在 this thread 上找到了答案。

为我解决它的方法是使用以下配置：

module.exports = 
  entry: "./app",
  output: 
    path: __dirname,
    filename: "bundle.js"
  ,
  module: 
      loaders: [
            
              test: /\.js$/,
              exclude: 'node_modules',
              loader: 'babel',
              query: presets: ['es2015'],
          
      ]
  ,
  target: 'node'
;

通过将目标设置为节点，webpack 将进行必要的更改以捆绑您的节点应用程序

编辑：此答案针对的 webpack 1.x 现在已被取代。

【讨论】：

尽管 webpack 更新很多，target: 'node' 行仍然很重要，是什么让它在 webpack v4 上工作

【参考方案2】：

如果您在 nodejs 环境中运行 webpack 包，则在 webpack.config.js 文件中需要 target: 'node' 否则 webpack 将默认值作为目标 check here 的 web。

您可以通过两种方式解决问题

将以下配置添加到您的 webpack.config.js

node: 
    fs: "empty"

或

将以下配置添加到您的 package.json 中

"browser": 
    "fs": false

编辑：

有希望的修复是

"browser": 
   "fs": false

【讨论】：

添加 fs 后出现此错误。配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.node 具有未知属性“fs”。这些属性是有效的：object __dirname?, __filename?, global? -> 节点兼容性功能的选项对象。

@SuuSoJeat 那是因为你的 webpack 版本比这个答案更新，see my answer 代替

添加 node: fs: "empty" 到 webpack.config.js 没有用，但是添加 "browser": "fs": false 到 package.json 了！成功！

package.json 条目完成了这项工作。谢谢:)

我在一些遗留代码中遇到了“路径”问题，我做了完全相反的事情。删除 "browser": "path": false 现在 webpack 注入了正确的对象！

【参考方案3】：

我在使用 webworkers 捆绑 NWjs 应用程序时遇到了同样的问题（这反过来又启用了节点）。

我找到的解决方案是将我在externals 中使用的每个本机模块都包含在模块名称中，并带有前缀commonjs。例如：

    ...
    target: "webworker", // or 'node' or 'node-webkit'
    externals:
        fs:    "commonjs fs",
        path:  "commonjs path"
    
    ...

我对不同项目中的目标“webworker”和“node-webkit”做了同样的事情来解决同样的问题。

webpacknwjswebworkernodejsnode

【参考方案4】：

将以下配置添加到您的 webpack.config.js

resolve: 
  fallback: 
    fs: false
  

【讨论】：

更新到 laravel-mix v6 时这对我有用

@kia nasirzadeh 我在 Laravel 8 中遇到了类似的错误，我无法解决。请你帮助我好吗？ ***.com/questions/68032168/…

【参考方案5】：

在尝试了我在互联网上找到的所有内容（target、externals、node configs）之后，唯一对我有用的解决方案是替换：

const filesystem = require("fs")
        or
import fs from "fs"

通过特殊的 webpack 版本

const fs = __non_webpack_require__("fs")

这会生成一个不被 webpack 解析的 require 函数。

【参考方案6】：

我需要构建一个类，如果在浏览器中执行将使用fetch，如果在节点中执行则使用fs。由于其他原因，生成单独的捆绑包是不切实际的，因此我生成了一个针对浏览器的捆绑包。

如果脚本在节点中运行，我使用的解决方案是使用eval('require("fs")')。

const fs = eval('require("fs")')

浏览器安全（fs 在浏览器中是 null）：

const fs = typeof window === 'object'
    ? null
    : eval('require("fs")')

【参考方案7】：

除了PDG的回答

我已经习惯了这种简短的复制/粘贴糖果。

使用 path 和 fs ：

var nodeModules = ;
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
  .filter(x => ['.bin'].indexOf(x) === -1)
  .forEach(mod =>  nodeModules[mod] = `commonjs $mod`; );

// Before your webpack configuration

module.exports = 
...

然后在您的配置文件中，将 nodeModules 变量包含在 externals 中

...
externals: nodeModules,
...

【参考方案8】：

对于我们正在构建的解决方案，我们必须强制使用旧版本的 webpack：

npm install --save --force webpack@webpack-3

【参考方案9】：

使用预定义的解决方案会更优雅： 将target: 'node' 添加到 webpack 配置文件中。

更多信息：official documentation