Webpack无法找到模块'electron'。

Question

我正在尝试开发一个基于这个教程的小型electron angular2应用程序。

似乎webpack打包存在一些问题，因为我无法在渲染器组件中要求/导入electron remote。

在我的AppComponent中，我执行以下操作：

import {remote} from 'electron';

我的Webpack配置

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');

var config = {
  debug: true,

  devtool: 'source-map',

  entry: {
    'angular2': [
    'rxjs',
    'reflect-metadata',
    'angular2/core',
    'angular2/router',
    'angular2/http'
  ],
  'app': './src/app/renderer/bootstrap'
},

  output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js'
  },

  resolve: {
    extensions: ['','.ts','.js','.json', '.css', '.html'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts',
        exclude: [ /node_modules/ ]
      }
    ]
  },

  plugins: [
    new CommonsChunkPlugin({ name: 'angular2', filename: 'angular2.js', minChunks: Infinity }),
    new CommonsChunkPlugin({ name: 'common',   filename: 'common.js' })
  ]
};

config.target = webpackTargetElectronRenderer(config);
module.exports = config;

Webpack 报以下错误：

ERROR in ./src/app/renderer/components/app/app.ts
(1,22): error TS2307: Cannot find module 'electron'.

- Tobias Timm

---

只是想提一下，当一个人回到使用旧版本的electron（例如v0.30.6以支持serialport-electron）时，也可能会出现这个错误，而他们仍在使用var app = require('app');等，而不是const electron = require('electron');--请参见https://github.com/atom/electron/blob/v0.30.6/docs/tutorial/quick-start.md。 - jacobq

Answer 1

我已经解决了它。

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

- Tobias Timm

---

对我来说不起作用...我得到了 syntax error near unexpected token ( var electron = require('./') ...有什么想法吗？（我正在使用基于webpack的最新CLI的angular2） - daveoncode

这对我不起作用。仍然出现“未捕获的错误：找不到模块”electron“”。 - Hum4n01d

Answer 2

尝试在你的webpack配置文件的module.exports对象底部添加target: "electron-renderer"。（我的是通过Angular CLI的ng eject创建的）

- Aaron Shappell

Answer 3

你是 TypeScript 新手吗？已经安装了吗？你可以通过以下方式进行安装：

npm install -g typescript

你的解决方案是一个 JavaScript 解决方案，如果这正是你想要的，那么它是一个不错的 hack，但如果你想使用 TypeScript，那么你应该能够使用 'import' 使其工作。

请参考以下教程： https://www.npmjs.com/package/typescript

另外，请检查： TS2307: Cannot find module 'angular2/core' while importing Angular2 on TypeScript

- mm_