使用webpack进行电子应用的捆绑错误`无法解析模块'电子'

Question

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

找不到./app.jsx中的错误模块:错误:无法解析/ Users/masterT/Downloads/gist中的模块'electron'

@ ./app.jsx 6:18-37

这是应用程序代码.

我做错了什么？

谢谢!

Answer 1

非常简单的解决方案:

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

webpack将忽略此要求

Answer 2

Webpack尝试electron使用已安装的node_modules 解析模块.但该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

您可以target: 'electron'在webpack配置中进行设置,然后不必在外部排除电子.

从webpack文档:

"electron"编译用于Electron - 支持 - require电子专用模块.