Webpack Express 无法解析module 'fs'，请求依赖是表达式

IT技术 javascript node.js webpack
2021-02-27 02:26:47

当我在我的项目中包含 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'
      }
    ]
  }
}

我试过了：

  1. 安装“fs”但它不起作用

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

    module.exports = {
  node: {
    fs: "empty"
  }
}

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

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

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

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

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

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

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

6个回答

只是发布一个答案，因为不是每个人都会阅读关于 SO 的评论。@Aurora0001 搞定了。Webpack 的配置需要这样设置：

"target": "node"
请参阅：webpack.js.org/concepts/targets您将其添加到根级配置对象中。
2021-04-21 02:26:47
这将产生另一个问题
2021-04-21 02:26:47
如果我正在构建一个 Web 应用程序，将目标设置为“节点”是否正确？
2021-04-25 02:26:47
@AbhishekNalin 不，不是。你应该设置target: web
2021-04-28 02:26:47
我应该在 webpack.config 的什么地方添加这个？
2021-05-14 02:26:47

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

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

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

希望有帮助！

import * as fs from 'fs'可悲的是，添加我的节点应用程序也不是解决方案：/
2021-05-16 02:26:47

我分两步解决了这个问题：

  1. 删除node_modules目录

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

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

我node: { fs: 'empty' }没有运气添加，

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

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

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

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

Angular V6 及更高版本的工作解决方案/黑客/补丁

我的解决方案是破解 Angular-CLI module以欺骗丢失的节点module。

安装后找到以下文件：

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' }

就是这样！！！

🎉🎉🎉🎉🎉

注意：每次更新软件包时都需要执行此修补程序。所以使用这个脚本：

包.json

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

补丁-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/

其它你可能感兴趣的问题
上一篇是否有在移动 Safari 中使用 onbeforeunload 的替代方法？ 下一篇按多个值分组 Underscore.JS 但保留键和值