web-dev-qa-db-ja.com

Electronアプリケーションでwebpackを使用したバンドルエラー `モジュール 'electron'を解決できません`

電子アプリケーションをReactで作成しようとしています。 Webpackを使用してReact JSX構文をコンパイルしますが、 webpackコマンドでコンパイルするには、次のエラーが表示されました。

./app.jsxモジュールのエラーが見つかりません：エラー：/ Users/masterT/Downloads/Gistのモジュール「electron」を解決できません

@ ./app.jsx 6：18-37

アプリケーションコード です。

私は何か間違っていますか？

ありがとう！

node.jsreactjswebpackelectron
22
MasterT

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

非常に簡単な解決策：

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

webpackはこのrequireを無視します

33
jnoleau

Webpackの設定でtarget: 'electron'を設定すれば、外部のエレクトロンを除外する必要はありません。

webpack documentation から：

"electron"Electron で使用するためにコンパイル-require- ing Electron固有のモジュールをサポートします。

21
Konrad Lalik