为 Electron 应用程序使用 webpack 时出现捆绑错误 `Cannot resolve module 'electron'`

Question

我正在尝试使用 React 创建一个 Electron 应用程序。我使用 Webpack 来编译 React JSX 语法，但是当我尝试使用 webpack 命令编译时，我得到了这个错误：

ERROR in ./app.jsx Module not found: Error: Cannot resolve module 'electron' in /Users/masterT/Downloads/gist

@ ./app.jsx 6:18-37

这里是 application code.

我做错了什么？

谢谢！

Answer 1

您的 package.json 有 'electron-prebuilt'，但您的代码中需要 'electron'。您是否尝试过 require-ing 'electron-prebuild'?

Answer 2

Webpack 尝试使用已安装的 node_modules 解析 electron 模块。但是 electron 模块在运行时在 Electron 本身中解析。因此，您必须像这样从 webpack 捆绑中排除特定模块：

webpack.config.js:

module.exports = {
  entry: './app.jsx',
  output: {
    path: './built',
    filename: 'app.js'
  },
  target: 'atom',
  module: {
    loaders: [
      {
        loader: 'babel',
        test: /\.jsx$/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  externals: [
    (function () {
      var IGNORES = [
        'electron'
      ];
      return function (context, request, callback) {
        if (IGNORES.indexOf(request) >= 0) {
          return callback(null, "require('" + request + "')");
        }
        return callback();
      };
    })()
  ]
};

Answer 3

一个非常简单的解决方案：

const remote = window.require('electron').remote;

webpack 会忽略这个要求

Answer 4

你可以在你的 webpack 配置中设置 target: 'electron' 然后你就不必在外部排除电子。

来自webpack documentation：

"electron" Compile for usage in Electron – supports require-ing Electron-specific modules.

Answer 5

此外，webpack.config.js：

const nodeExternals = require('webpack-node-externals')

module.exports = {
    ...
    externals: [ nodeExternals(), 'react', 'electron' ],
    ...
}

Answer 6

我尝试了上面的大部分示例，但其中 none 似乎对我有用。然后我使用 npm 安装 Electron 然后使用 yarn build 它成功了，我得到了我的生产版本。

npm i electron

为 Electron 应用程序使用 webpack 时出现捆绑错误 `Cannot resolve module 'electron'`

Bundle error using webpack for Electron application `Cannot resolve module 'electron'`

node.js

reactjs

webpack

electron