Webpack:Bundle.js - 未捕获的ReferenceError:未定义进程

Question

这是我的webpack.config.js

"use strict";

module.exports = {
    entry: ['./main.js'],
    output: { path: __dirname, filename: 'bundle.js' },
    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {test: /\.json$/, loader: "json"},
        ]
    },
    externals: {
        React: 'react',
    },
    target: "node",
};

和Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import Chart from 'chartjs';
import jQuery from 'jquery';
import vis from 'vis';
import babel from 'babel-core';

该Bundle.js插在我的index.html.浏览器然后给出错误:

Uncaught ReferenceError: process is not defined
    at Object.measureMethods (bundle.js:1297)
    at Object.<anonymous> (bundle.js:530)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:288)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:158)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:110)
    at __webpack_require__ (bundle.js:20)
    at Object.<anonymous> (bundle.js:90)

我应该在webpack.config.js中更改什么才能使此错误消失？

Answer 1

2020 年 10 月更新：

对于 webpack 5，可以参考process/browser相应的plugins部分webpack.config.js

// webpack needs to be explicitly required
const webpack = require('webpack')

module.exports = {

/* ... rest of the config here ... */

  plugins: [
    // fix "process is not defined" error:
    // (do "npm install process" before running the build)
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ]
}

Answer 2

使用dotenv节点模块：

第 1 步dotenv：安装：

yarn add -D dotenv 或者 npm i -D dotenv

第 2 步：.env使用所需的变量在项目根目录中添加文件：

NODE_ENV=development
apiKey=w23io222929kdjfk
domain=example.domain.org

第 3 步：使用以下命令定义这些变量webpack.DefinePlugin：

NODE_ENV=development
apiKey=w23io222929kdjfk
domain=example.domain.org

第 4 步：访问environment variables您的source code：

// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv')

module.exports = {
  //...
  plugins: [
    // ...
    new webpack.DefinePlugin({
       'process.env': JSON.stringify(dotenv.config().parsed) // it will automatically pick up key values from .env file
    })
    // ...
  ]
  //...
}

#### 重要链接：-`dotenv`：https://www.npmjs.com/package/dotenv-`webpack.DefinePlugin`：https://webpack.js.org/plugins/define-plugin/

祝你好运...

Answer 3

Webpack 5移除了使用符号访问环境变量的能力process.env.MY_ENV_VAR。我遇到了同样的问题，因为Uncaught ReferenceError: process is not defined我的浏览器控制台出现错误。从Webpack 从 v4 移植到 v5 的文档中，他们提到了以下内容：

1.升级到v5之前，确认你可以轻松做到

尝试在 webpack 4 配置中设置以下选项并检查构建是否仍然正常工作。

module.exports = {
   // ...
   node: {
       Buffer: false,
       process: false
   }
};

webpack 5 从配置模式中删除了这些选项，并将始终使用 false。

在升级 webpack 5 的配置时，您必须再次删除这些选项。

2. 处理 env vars 因为process被删除了

• 关于运行时错误：
  • process 没有定义。
    • webpack 5 不再为此 Node.js 变量包含 polyfill。避免在前端代码中使用它。
    • 想要支持前端和浏览器使用吗？使用exports或importspackage.json 字段根据环境使用不同的代码。
      • 还使用该browser字段来支持较旧的打包程序。
      • 替代方案：用typeof process检查包装代码块。请注意，这将对包大小产生负面影响。
    • 想要使用环境变量process.env.VARIABLE？您需要使用DefinePlugin或EnvironmentPlugin在配置中定义这些变量。
      • 考虑VARIABLE改用并确保也进行检查typeof VARIABLE !== 'undefined'。process.env是 Node.js 特定的，应避免在前端代码中使用。

因此，鉴于上述信息，可以使用以下两个插件之一来使用环境变量。

const webpack = require("webpack");

module.exports = {
    ...
    plugins: [
        new webpack.DefinePlugin({
            "process.env.MY_ENV_VAR": JSON.stringify(process.env.MY_ENV_VAR)
        }),
        new webpack.EnvironmentPlugin(['MY_ENV_VAR']); // <--This is shorthand, does the same thing as the DefinePlugin
    ],
};

然后在您的生产代码中，仍然可以以相同的方式引用环境变量，例如：

console.log(process.env.MY_ENV_VAR);

但是，正如他们在上面包含的文档中所说，使用process.env不是推荐的方式，因为这是 Node.js 特定的。

Answer 4

这就是我解决的方法

参考错误：进程未定义

Webpack 5错误

1. npm i --save-dev 进程

2. 删除节点模块文件夹

3. 在你的 webpack 配置文件插件部分添加下面

   plugins: [
   new webpack.ProvidePlugin({
       process: 'process/browser',
   }),
   

同样在 webpack 中添加如下别名：

   resolve: {
    alias: {
        process: "process/browser"
    },

现在执行 npm i ，当您构建应用程序时，错误将消失。您可以在此处阅读有关 webpck 迁移的信息https://medium.com/@arianpopalyar/webpack-4-to-webpack-5-migration-9bc683d2bc72

Answer 5

你需要添加一个插件来定义你的env(在webpack配置中):

   plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],