Webpack 找不到模块“电子”

Posted 2023-03-13

【中文标题】Webpack 找不到模块“电子”

【英文标题】：Webpack cannot find module 'electron'

【发布时间】：2016-03-29 17:05:52

【问题描述】：

我正在尝试基于this tutorial开发一个小电子angular2应用程序

似乎他们在捆绑 webpack 时出现了一些错误，因为我无法在我的渲染器组件中要求/导入电子遥控器。

在我的 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'.

【问题讨论】：

只是想提一下，当他们仍在使用 var app = require('app'); 等时切换回使用旧版本的电子（例如 v0.30.6 支持串行端口电子）时也会发生此错误. 而不是const electron = require('electron');——见github.com/atom/electron/blob/v0.30.6/docs/tutorial/…

【参考方案1】：

解决了

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

【讨论】：

我不适合我...我得到syntax error near unexpected token ( var electron = require('./') ...任何想法？ （我使用 angular2 和基于 webpack 的最新 CLI）

这对我不起作用。仍然收到Uncaught Error: Cannot find module "electron"

【参考方案2】：

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

【参考方案3】：

您是 TypeScript 的新手吗？你安装了吗？您可以通过以下方式安装它：

npm install -g typescript

您的解决方案是一个 java 脚本解决方案，如果您正在寻找它，这是一个不错的 hack，但是如果您想使用 TypeScript，那么您应该能够使用“导入”使其工作。

在以下位置完成教程： https://www.npmjs.com/package/typescript

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