webpack - 导入 "require is not defined"时，带有 Webpack 的 Electron Forge 得到 'events'

Question

我最近开始了一个使用 Electron 锻造和 webpack 模板的新项目。我正在创建一个简单的身份验证类，并希望在 nodejs 中使用事件系统。我正在使用 import 语法，但收到一条错误消息，指出 require 未定义。我不想打开 nodeIntegration 并且我认为 webpack 会自动使用 nodejs 事件系统的 browserfy 版本:

You usually do not have to install events yourself! If your code runs in Node.js, events is built in. If your code runs in the browser, bundlers like browserify or webpack also include the events module.

安装 browserify 事件模块也不能解决问题。我还尝试排除 node_modules/events 文件夹以希望 webpack 使用自己的事件模块，但这对我不起作用。这是我的代码:

import { EventEmitter } from 'events';

export default class Auth {
  constructor(socket) {
  }

  setToken(token) {
    this.token = token;
    localStorage.setItem('token', token);
    this.emit('token', token);
  }

  checkToken() {
    if(localStorage.getItem("token") !== null) {
      this.setToken(localStorage.getItem("token"));
    } else {
      this.emit('false', false);
    }
  }

  getToken() {
    return localStorage.getItem("token");
  }

  setAuth(auth) {
    this.emit('auth', auth);
    this.isAuth = auth;
  }
  
}

这是我的 webpack 渲染器配置:

const rules = require('./webpack.rules');
const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

rules.push({
  test: /\.css$/,
  use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
});

const assets = [ 'assets' ];
const copyPlugins = assets.map((asset) => {
  return new CopyWebpackPlugin({
    patterns: [{ from: path.resolve(__dirname, 'src/renderer/', asset), to: asset }],
  });
});

module.exports = {
  // Put your normal webpack config below here
  module: {
    rules,
  },
  plugins: [
      new webpack.ProvidePlugin({
          $: 'jquery',
      }),
      ...copyPlugins
  ],
  resolve: {
    alias: {
      'components': path.resolve(__dirname, './src/renderer/components'),
      'pages': path.resolve(__dirname, './src/renderer/pages'),
      'core': path.resolve(__dirname, './src/renderer/core'),
    },
    extensions: ['.js']
  },
};

这是我的 webpack 规则配置:

module.exports = [
  // Add support for native node modules
  {
    test: /\.node$/,
    use: 'node-loader',
  },
  {
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@marshallofsound/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },
];

这是错误:

external "events":
Uncaught ReferenceError: require is not defined
    at Object.events (external "events":1)
    at __webpack_require__ (bootstrap:832)
    at fn (bootstrap:129)
    at Module../src/renderer/core/Auth.js (Auth.js:1)
    at __webpack_require__ (bootstrap:832)
    at fn (bootstrap:129)
    at Module../src/renderer/index.js (index.js:1)
    at __webpack_require__ (bootstrap:832)
    at fn (bootstrap:129)
    at Object.0 (routes.js:40)

Answer 1

休息一下后，我意识到解决方案很简单:
我只需要将以下内容添加到我的渲染器配置中:

target: 'web'