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尝试使用已安装的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

您可以在网络包配置中设置target: 'electron'，然后您不必在外部排除电子。

来自webpack documentation：

"electron"在Electron中编译使用 - 支持require - 电子专用模块。

Answer 4

此外，webpack.config.js：

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

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

Answer 5

您的package.json已预先制作电子版＆＃39;但是你需要电子＆＃39;在你的代码中。您是否尝试过要求电子预制＆＃39;？

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

5 个答案: