未捕获的ReferenceError:未定义进程

Question

我正在使用node.js来创建一个Web应用程序.当我运行应用程序时(通过在浏览器上打开index.html或在终端上使用命令"npm start")我得到两个错误:

未捕获的ReferenceError:未定义进程

未捕获的ReferenceError:未定义require

我解决了"require is not defined"错误,具体包括在我的index.html head标签中指向此脚本的链接,其中定义了require函数.但是,我找不到类似于过程函数的东西.

我的问题是双重的:

1. 为什么需要重新定义内置的node.js模块？为什么他们不被认可,那就是"内置模块"？术语"内置模块"是否意味着模块不需要外部/第二次重新定义？

2. 有没有办法解决这个问题？我的脚本非常简单,我只是尝试使用node.js的基本功能,所以我无法弄清楚我可能做了什么错误.

如果有人遇到这个问题,并找到了解决问题的方法,或者出现这种情况的原因,那么你将会有很大的帮助.

Answer 1

Webpack 可以将环境变量注入“客户端”.js 代码（对于 SPA/PWA 非常有用）。您应该将它们定义为 webpack.config.js 中的插件

webpack.config.js

module.exports = {
plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.MY_ENV': JSON.stringify(process.env.MY_ENV),
      ... and so on ...
    })
],
}

现在您可以在客户端访问它：

app.js

// Something like that
if(process.env.NODE_ENV === 'debug'){
    setDebugLevel(1)
}

Answer 2

以下解决方案Uncaught ReferenceError: process is not defined：

1. 如果您使用的是 CRA（创建 React 应用程序），请使用process.env.
2. 如果您使用的是 ViteJS，请使用import.meta.env.

详细了解如何在 Vite 中导入 env 进程：https://vitejs.dev/guide/env-and-mode.html

例子：

加拿大税务局：process.env.API_BASE_URL

视频：import.meta.env.VITE_API_BASE_URL

Answer 3

Node.js 代码必须由节点进程运行，而不是浏览器（代码必须在服务器中运行）。

要运行代码，您必须运行以下命令：

node server.js

然后你就可以从浏览器通过输入“ http://localhost:8080 ”来访问你的服务器，例如。您必须有一个包含您想要的服务器代码的文件 server.js（或其他）（在本例中，在端口 8080 中创建一个 Web 服务器）。

你可以按照这个简单的例子，使用 express 作为 http 服务器模块：http : //expressjs.com/starter/hello-world.html

Answer 4

如果您遇到此问题并且正在使用 webpack，则可以process通过DefinePlugin在webpack.config.js.

在下面的示例中，我展示了如何向process.env对象添加一些内容以使其在浏览器中可用：

1. .env使用库 dotenv内部的所有环境变量
2. 的值NODE_ENV，是'development'或者'production'

工作示例

# .env

API_KEY=taco-tues-123
API_SECRET=secret_tacos

// webpack.config.js

const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const isDevelopment = process.env.NODE_ENV !== 'production'

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenv.parsed),
      'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'),
    }),
  ].filter(Boolean),
}

// Within client side bundle (React)
// src/App.jsx

console.log(process.env)          // {API_KEY: "taco-tues-123", API_SECRET: "secret_tacos"}
console.log(process.env.NODE_ENV) // development

请注意，console.log(process.env)只有文件中的值.env，而NODE_ENV不是对象的一部分process.env。

在下面的示例中，我展示了如何尝试注入process.env导致堆栈溢出的对象。我还重点介绍了 webpack 文档中为什么下面的代码不起作用。

损坏的示例

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        ...dotenv.parsed,
        'NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production')
      }
    }),
  ].filter(Boolean),
}

// Within client side bundle (React)
// src/App.jsx

console.log(process.env)          // Uncaught ReferenceError: taco is not defined
console.log(process.env.NODE_ENV) // development

来自 webpack DefinePlugin 文档：

警告定义进程首选值时

'process.env.NODE_ENV': JSON.stringify('production')

超过

process: { env: { NODE_ENV: JSON.stringify('production') } }

使用后者将覆盖进程对象，这可能会破坏与某些期望在进程对象上定义其他值的模块的兼容性。

！警告！

按照描述注入dotenv.parsed客户端捆绑包会将这些秘密暴露给客户端。出于开发目的，这没什么大不了的，但在已部署的生产环境中，任何密码或私有 api 密钥对于任何寻找它们的人来说都是可见的。

Answer 5

我遇到了这个问题，由于某种原因，使用webpack.config.js其他建议进行再多的摆弄都无法解决它。我怀疑我正在使用的某些软件包针对浏览器的编写不正确，或者我的环境可能有问题。

我最终通过将以下代码添加到我的 HTML 文件中所有其他<script>文件引用之上来“修复”它。。

    <script>
        // Required by some npm packages
        window.process = { browser: true, env: { ENVIRONMENT: 'BROWSER' } };
    </script>

Answer 6

您可以将以下内容添加到您的 package.json文件中

{
"name": "mypackage",//default
"version": "0.0.1", //default
"eslintConfig": {
    "env": {
        "browser": true,
        "node": true
    }
}}

更多说明