使用电子应用程序的webpack时发生捆绑错误'无法解析模块' electron ''

ux6nzvsh  于 2022-11-13  发布在  Webpack
关注(0)|答案(6)|浏览(202)

我正在尝试使用 React 创建 Electron 应用程序。我使用 Webpack 编译 React JSX 语法,但当我尝试使用webpack命令编译时,出现以下错误:
未找到./app.jsx模块中的错误:错误:无法解析/Users/masterT/Downloads/gist中的模块'electronic'
@ ./应用程序.jsx 6:18-37
这里是application code
我做错了什么吗?

u0njafvf

u0njafvf1#

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

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

webpack将忽略此必需

d5vmydt9

d5vmydt92#

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();
      };
    })()
  ]
};
cnh2zyt3

cnh2zyt33#

你可以在你的webpack配置中设置target: 'electron',这样你就不必排除外部的电子。
来自webpack文档:
"electron"编译以在Electron中使用-支持require-ing电子专用模块。

6bc51xsx

6bc51xsx4#

我尝试了上面的大多数例子,但似乎没有一个对我有效。然后我用npm安装了Electron,然后用yarn build,它成功了,我得到了我的生产版本。
npm i electron

py49o6xq

py49o6xq5#

此外,webpack.config.js

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

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

2vuwiymt6#

您的package.json有'electron-prebuilt',但您的程式码中需要'electron'。您尝试过要求'electron-prebuilt'吗?

相关问题