Webpack Express 无法解析模块“fs”，请求依赖是表达式

Posted 2023-03-07

【中文标题】Webpack Express 无法解析模块“fs”，请求依赖是表达式

【英文标题】：Webpack Express Cannot Resolve Module 'fs', Request Dependency is Expression

【发布时间】：2017-04-18 23:52:46

【问题描述】：

当我在项目中包含 Express 时，我在尝试使用 webpack 构建时总是会遇到这些错误。

webpack.config.dev.js

var path = require("path")

module.exports = 
  entry: 
    "server": "./server/server.ts"
  ,
  output: 
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/public/"
  ,
  module: 
    loaders: [
      
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        loader: "ts-loader"
      , 
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      , 
        test: /\.json$/,
        loader: "json-loader"
      , 
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
      , 
        test: /\.css$/,
        loader: ["style-loader", "css-loader", "postcss-loader"]
      , 
        test: /\.(jpe?g|gif|png|svg)$/i,
        loader: 'url-loader?limit=10000'
      
    ]
  

我试过了：

正在安装“fs”，但它不起作用

在某处读取以更改节点 fs 属性。它消除了错误警告，但我认为这不是一个好的永久解决方案。

module.exports = 
  node: 
    fs: "empty"
  

时间：2496 毫秒 资产大小块块名称 bundle.js 761 kB 0 [发出] 服务器 bundle.js.map 956 kB 0 [发出] 服务器 + 119 个隐藏模块

./~/express/lib/view.js 中的警告 关键依赖： 78:29-56 依赖的请求是一个表达式 @ ./~/express/lib/view.js 78:29-56 ./~/express/lib/view.js 中的错误

找不到模块：错误：无法解析 /Users/clementoh/Desktop/boilerplate2/node_modules/express/lib 中的模块“fs” @ ./~/express/lib/view.js 18:9-22 ./~/send/index.js 中的错误

找不到模块：错误：无法解析 /Users/clementoh/Desktop/boilerplate2/node_modules/send 中的模块“fs” @ ./~/send/index.js 24:9-22 ./~/etag/index.js 中的错误

找不到模块：错误：无法解析 /Users/clementoh/Desktop/boilerplate2/node_modules/etag 中的模块“fs” @ ./~/etag/index.js 22:12-25 ./~/destroy/index.js 中的错误

找不到模块：错误：无法解析 /Users/clementoh/Desktop/boilerplate2/node_modules/destroy 中的模块“fs” @ ./~/destroy/index.js 14:17-30 ./~/mime/mime.js 中的错误

找不到模块：错误：无法解析 /Users/clementoh/Desktop/boilerplate2/node_modules/mime 中的模块“fs” @ ./~/mime/mime.js 2:9-22

【问题讨论】：

您是否尝试将"target": "node" 添加到您的webpack.config.js？

哦哈哈，这实际上解决了“fs”问题:) 我将如何解决警告？ - Critical dependencies: 78:29-56 the request of a dependency is an expression @ ./~/express/lib/view.js 78:29-56 ERROR in ./~/express/lib/view.js

我记得通过简单地破坏 node_modules 文件夹并再次执行 npm install 就可以多次摆脱这种事情。

github issue

target: 'node' 只有在使用 webpack 构建服务器端代码时才应添加。如果您使用的是静态反应 SPA，则永远不应使用 target: 'node'，因为它不会捆绑您的依赖项，并且您的应用程序可能无法正确加载。我想我最终在捆绑包中包含了node_modules，并使用 react-router 来拆分代码并降低初始 SPA 加载时间。

【参考方案1】：

只是发布一个答案，因为不是每个人都在 SO 上阅读 cmets。 @Aurora0001 搞定了。 Webpack 的 config 需要有这个设置：

"target": "node"

【讨论】：

如果我正在构建一个Web应用程序，将target设置为'node'是否正确？

@AbhishekNalin 不，不是。你应该设置target: web

我应该在 webpack.config 的哪个位置添加这个？

看这个：webpack.js.org/concepts/targets你把它添加到根级配置对象中。

这将产生另一个问题

【参考方案2】：

我在堆栈 Angular 2 - Electron - Webpack 上，我需要在我的服务中使用 fs，我终于找到了怎么做：

1) 在 webpack.common.js 中，指定 target:'electron-renderer'

2) 在您的服务或组件中：import * as fs from 'fs'; 并像对节点项目一样使用 fs。

希望对您有所帮助！

【讨论】：

在我的节点应用程序中添加import * as fs from 'fs' 也不是一个解决方案：/

【参考方案3】：

我通过两步解决了这个问题：

删除node_modules目录

将target:'node' 添加到 webpack 配置文件中

然后运行npm install。它对我很好。

【参考方案4】：

我加了node: fs: 'empty' 运气不好，

然后我在启动命令中添加了--config：

webpack-dev-sever webpack.config.dev.js

使用 --config 标志来使用自定义文件。

webpack-dev-sever --config webpack.config.dev.js

【参考方案5】：

适用于 Angular V6 及更高版本的工作解决方案/Hack/补丁

我的解决方案是破解 Angular-CLI 模块来欺骗丢失的节点模块。

安装后找到以下文件：

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

找到node 行并添加：

node:  crypto: true, stream: true, fs: 'empty', net: 'empty' 

就是这样！！！

?????

注意：每次更新软件包时都需要打这个补丁。所以使用这个脚本：

package.json

"scripts": 
  ...
  "postinstall": "node patch-webpack.js"
  ...

patch-webpack.js

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) 
  if (err) 
    return console.log(err);
  
  let result = data.replace(/node: false/g, "node: crypto: true, stream: true, fs: 'empty', net: 'empty'");

  fs.writeFile(f, result, 'utf8', function (err) 
    if (err) return console.log(err);
  );
);

来源： https://blog.lysender.com/2018/07/angular-6-cannot-resolve-crypto-fs-net-path-stream-when-building-angular/

【参考方案6】：

添加"target": "node", 可以将其添加到webpack.config.js。