Webpack 不能使用 __dirname？

Posted 2023-03-08

【中文标题】Webpack 不能使用 __dirname？

【英文标题】：Webpack can not use __dirname?

【发布时间】：2016-07-05 14:08:22

【问题描述】：

我正在尝试使用 node-postgres 将我的应用程序连接到 Postgres。我使用的代码是：

import React from 'react';
import pg from 'pg';
import fs from 'fs';
var cn = 
  host: 'localhost', // server name or IP address; 
  port: 5432,
  database: 'my_db',
  user: 'myname',
  password: 'mypass'
;

它会产生错误：

index.js:5 Uncaught ReferenceError: __dirname is not defined
up  @ index.js:5
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ client.js:4
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ index.js:3
console.EventEmitter._events  @ index.js:81
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ app.js:26957
__webpack_require__ @ bootstrap 539ecc7…:19
content @ bootstrap 539ecc7…:39
__webpack_require__ @ bootstrap 539ecc7…:19
(anonymous function)  @ bootstrap 539ecc7…:39
(anonymous function)  @ bootstrap 539ecc7…:39
webpackUniversalModuleDefinition  @ universalModuleDefinition:7
(anonymous function)  @ universalModuleDefinition:10

控制台提供的index.js上的路径是webpack:///./~/pg/~/pgpass/lib/index.js:5

我在how to write file with node webkit js? 尝试了@Renzo Poddighe 解决方案，但我仍然遇到同样的错误。我认为这可能与https://github.com/nwjs/nw.js/wiki/Differences-of-javascript-contexts#resolving-relative-paths-to-other-scripts 和https://github.com/nwjs/nw.js/issues/264 的讨论有关。他们说

// __dirname is not defined in webkit context, this is only node.js thing
console.log(__dirname); // undefined

和

__dirname 在 Node.js 模块中工作，即在使用 require() 调用的 JavaScript 代码中。 __dirname 不仅在 WebKit 脚本中有效，即在使用 html 或 jQuery 的 $.getScript() 或任何其他类似方法调用的 JavaScript 代码中。

有什么想法吗？让我知道我需要包含哪些其他信息。

编辑

我认为我的目标是

var config = 
  entry:  app: './src/index.jsx',
  output: 
     libraryTarget: 'umd',
     path: path.join(__dirname, 'dist'),
     filename: '[name].js'
  , ...

我的 webpack.config.js 看起来像：

...
  node: 
    console: true,
    __dirname: true,
    dns: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  
...

【问题讨论】：

你的 webpack 的目标是什么？ web/node 或其他 webpack.github.io/docs/configuration.html#target

我看到的只有target 是libraryTarget: 'umd',。我应该明确设置吗？根据文档的链接，看来我的目标默认是网络。

尝试在 webpack 配置中指定target: 'node'

尝试这样做，我得到一个错误“未捕获的 ReferenceError：进程未定义 ReactPerf.js:38”。

【参考方案1】：

在这种情况下，将其添加到您的 webpack 配置中：

  node: 
    __dirname: true
  

这将告诉 webpack 将 __dirname 实例替换为模块的路径。此路径相对于context

【讨论】：

我添加了它，但重新启动我的 webpack-dev-server 后仍然出现相同的错误。如果有什么不同，我也会使用热加载器。

您有什么理由尝试在 Web 环境中使用 fs 和 pg 吗？ Webpack 对节点 api 有模拟，但另一方面，pg 是一个节点包。它可能会使用一些 node api underhood。

我可能会以错误的方式处理此问题，但我想为数据库创建一个 Web 界面，以便非技术管理员可以添加、编辑和删除数据库中的条目。我想我需要包括 pg 来做到这一点。我包括 fs 来尝试修复错误，但也许引入了更多。如果我不包括 dns、fs、tls、net，则会收到有关未找到模块的错误。

你做错了。在 pg 之上创建一个 REST API，并从您的网络应用程序中使用它。

我在尝试为我的 Electron 应用程序设置自定义 Webpack 时遇到了同样的问题。现在我收到一个错误：ERROR Invalid options in vue.config.js: "node" is not allowed