Question

我有一个基于React的Web应用程序，我正在尝试构建一个电子应用程序。我已经走得很远，应用程序似乎加载但介于两者之间我收到错误require is not defined。

这些是我正在使用的工具的版本：

webpack 3.6
反应15.6.1
电子1.7.6

以下是发生错误的行的屏幕截图：

请注意，在控制台中定义了require - 我在某处读到这可能是竞争条件，但即使是这样，我该怎么办呢？

这是我的webpack.config.js（请注意我使用的是electron-renderer目标）：

var path = require('path');
var webpack = require('webpack');
var StatsPlugin = require('stats-webpack-plugin');
var devServerPort = 3808;

var presets = ['es2015', 'react', 'stage-0'];

var options = {
  entry: {
    'application': [
      'react-hot-loader/patch',
      'app/application.jsx'
    ]
  },
  output: {path: __dirname, filename: 'js/bundle.js' },

  resolve: {
    modules: [
      path.join(__dirname, 'node_modules/'),
      path.join(__dirname, 'app/')
    ],
    extensions: ['.js', '.jsx']
  },

  node: {
    __dirname: false,
    __filename: false
  },

  plugins: [
    // must match electron.webpack.manifest_filename
    new StatsPlugin('manifest.json', {
      // We only need assetsByChunkName
      chunkModules: false,
      source: false,
      chunks: false,
      modules: false,
      assets: true
    }),
    new webpack.ProvidePlugin({
      "React": "react",
    }),
    new webpack.ProvidePlugin({
      "ReactDOM": "react-dom",
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.BASE_URL': JSON.stringify('localhost:3000'),
      'global': {}, // bizarre lodash(?) webpack workaround
      'global.GENTLY': false // superagent client fix

    })
  ],

  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loaders: "babel-loader", query: { presets: ['react', 'es2015', 'stage-0'] }},
      { test: /\.jsx$/, exclude: /node_modules/, loaders: "babel-loader", query: { presets: presets }},
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      { test: /\.jpg$/, loader: "file-loader" },
      { test: /\.(png|)$/, loader: 'url-loader?limit=100000' },
      { 
          test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
          loader: "file-loader" 
      },
      { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] },
      {
        test: /\.json$/,
        loaders: ['json-loader']
      }
    ]
  },
};

options.target = 'electron-renderer';

module.exports = options;

我甚至尝试使用webpack-target-electron-renderer，但它造成了更多问题。

Answer 1

过去我遇到过类似的问题，如果事实上同样的问题就是如何解决它。

您展示的要求是在包装IIFE中，这意味着this不是window而是函数，这意味着当您尝试查找require时，它不在范围内。要解决此问题，您需要使用imports-loader。

在您的情况下，在module下，然后loaders下，添加：

{
    test: require.resolve("/*require/import path which requires the file where require("url") is*/"), 
    use: "imports-loader?this=>window"
}

希望这能解决您的问题。

Answer 2

您需要使用browserify或babelify之类的内容。

查看更深入的解释here。

当使用带有反应应用程序的电子时，`require is not defined`错误

2 个答案: