Electron 无法正确安装，请删除 node_modules/并尝试重

问题描述

我正在尝试使用 webpack + react + electron，当我在 CLI 中输入electron"时.它给了我这个错误:

我删除了 node_modules 并一遍又一遍地重新安装了所有模块大约 6 次，显然删除 node_modules 并安装不是解决方案，所以我需要社区的帮助来查找此错误.

package.json

<代码>{"name": "ElectronULTIMA",版本":1.0.0"，描述":电子应用程序"，"main": "main.js",脚本":{开始":电子."，"巴别塔": "巴别塔",网络包":网络包"},作者": ""，许可证":ISC"，开发依赖":{"babel-core": "^6.23.1","babel-loader": "^6.3.2","babel-preset-es2015": "^6.22.0","babel-preset-react": "^6.23.0",电子":^1.6.1"，电子包装器":^8.5.2"，电子预建":^1.4.13"，"webpack": "^2.2.1",webpack-dev-server":^2.4.1"},依赖":{引导程序":^3.3.7"，电子":^1.6.1"，电子预建":^1.4.13"，反应":^15.4.2"，反应引导":^0.30.7"，反应域":^15.4.2"，反应模式":^1.7.1"}}

ma​​in.js

const electron = require('electron');const {应用程序、对话框、菜单、托盘、浏览器窗口} = require('electron');const remote = require('electron').remote;常量路径 = 要求('路径');常量 url = 要求('url')；const $ = jQuery = require('jquery');const ipc = require('electron').ipcMain;常量 fs = 要求('fs');常量 AWS = 要求('aws-sdk')；const ep = new AWS.Endpoint('dynamodb.us-west-1.amazonaws.com');const db = new AWS.DynamoDB.DocumentClient({//Dynamo 数据库构造函数"apiVersion": '2012-08-10',"地区": 'us-west-1',端点":ep，"accessKeyId": '*审查*',"secretAccessKey": '*审查*'});//----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////渲染通信//----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------//让胜利；//主项目窗口让rnews；//新闻窗口win = new BrowserWindow({ 宽度: 900, 高度: 700 });win.loadURL(`file://${__dirname}/index.html`);//win.openDevTools();//----------------------------------------------------------------------------------////----------------------------------------------------------------------------------////----------------------------------------------------------------------------------////RNEWS 窗口实例//----------------------------------------------------------------------------------//rnews = new BrowserWindow({ width: 620, height: 900, show: false, backgroundColor: '#2e2c29', title: '"R" News Articles' });//useContentSize (boolean)//RNEWS 窗口可见性ipc.on('rnews', () => {rnews.loadURL(`file://${__dirname}/rnews/index.html`);//rnews.openDevTools();if (rnews.isVisible()) { rnews.hide();}if (!rnews.isVisible()) { rnews.show();}});win.on('关闭', () => { win = null; });rnews.on('关闭', () => { rnews = null; });rnews.on('准备上映', () => {rnews.show();});}//----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------////全球范围//----------------------------------------------------------------------------------------------------------////----------------------------------------------------------------------------------------------------------//app.on('准备好', MAIN_WINDOW);//当最后一个窗口关闭时app.on('window-all-close', () => {app.quit();});app.on('激活', () => {如果(赢===空){主窗口()；}});

webpack.config.js

const path = require('path');常量 webpack = require('webpack');模块.exports = {devtool: '内联源地图',入口: ['./index.js'],输出:{路径:__dirname，文件名:'./bundle.js'}，解决:{模块:['node_modules'，'src']，扩展:['.js']}，看:真的，模块: {装载机:[{测试:/.jsx?$/,加载器:'babel-loader'，排除:/node_modules/，询问: {预设:['es2015', 'react']}}]},目标:节点"，插件:[新的 webpack.HotModuleReplacementPlugin(),新的 webpack.NoEmitOnErrorsPlugin()]}

index.js

从'react'导入反应；从 'react-dom' 导入 ReactDOM；导入 { InputGroup, Button, ButtonToolbar, ButtonGroup, FormControl, FormGroup, render } from 'react-bootstrap';从'react-modal'导入ReactModal；常量 AWS = 要求('aws-sdk')；const ep = new AWS.Endpoint('dynamodb.us-west-1.amazonaws.com');const db = new AWS.DynamoDB.DocumentClient({//Dynamo 数据库构造函数"apiVersion": '2012-08-10',"地区": 'us-west-1',端点":ep，"accessKeyId": '*审查*',"secretAccessKey": '*审查*'});常量 GRAB_RNEWS_ARTICLES = 新承诺((解决，拒绝)=> {db.scan({ TableName: 'Rnews' }, (error, 文章) => {如果(错误)拒绝(错误)；解决(文章)；});});函数渲染图像(道具){//如果 thumbnailOrNo 作为道具传递给它类rnewsThumbnails"if (props.thumbnailOrNo) {返回 (<img src={props.imageUrl} className="img-rounded rnewsThumbnails"></img>)} 别的 {返回 (<img src={props.imageUrl} className="img-rounded"></img>)}}新闻()；函数 RNEWS() {GRAB_RNEWS_ARTICLES.then(rArticles => {$(函数(){//使所有链接在新标签页中打开$("a").attr('target', '_blank');});类 RNEWS_Templating 扩展 React.Component {构造函数(道具){超级(道具)；//不要忘记 this.props.article 是作为单个文章传递的}使成为() {让 defaultImg = 'https://lh3.googleusercontent.com/-Lk5XNJRyFKw/AAAAAAAAAAI/AAAAAAAAAA0/xkk9_owpEhE/photo.jpg';返回 (<div className="panel panel-warning"><div className="panel-body"><div className="col-sm-2"><strong className="articlesource">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.props.article.source}</strong><br/><RenderImage imageUrl={this.props.article.imgUrl ||defaultImg } thumbnailOrNo="yes"/></div><div className="col-sm-10"><strong>短标题:</strong><span className="rnewsshorttitle"><font size="4">{this.props.article.title}</font></span><br/><span className="rnewsdescription">{this.props.article.description}</span><br/><a href={this.props.article.url}>{this.props.article.url}</a></div></div></div>);}}//----------------------------------------------------------------------------------////RNEWS_Parent 将保存状态//----------------------------------------------------------------------------------//类 RNEWS_Parent 扩展 React.Component {构造函数(道具){超级(道具)；这个.state = {文章:this.props.rArticles.Items，搜索值:"，标题: []}this.searchValueUpdater = this.searchValueUpdater.bind(this);}searchValueUpdater(e) {this.setState({ searchVal: e.target.value })}组件WillMount() {this.state.articles.map(article => {返回 this.state.titles.push(article.title);})}使成为() {//将用于仅显示 10 篇文章让二十条= 0；返回 (<div className="容器"><div className="井行"><中心><font size="5">"R" 新闻文章(升序)</font></中心>
<h6>文章总数:<span className="goldenvalue">{this.props.rArticles.Count}</span></h6><h6>扫描文章总数:<span className="goldenvalue">{this.props.rArticles.ScannedCount}</span></h6></div><FormGroup bsSize="sm" controlId="rnewsSearch" validationState="success"><表单控件placeholder="搜索文章"inputRef={(输入) =>{ this.input = 输入；}}onChange={this.searchValueUpdater}></FormControl></FormGroup><span>{this.state.searchVal}</span>
<h3><font color="magenta">&nbsp;&nbsp;&nbsp;&nbsp;文章:</font></h3><br/><br/><div className="col-sm-8">{this.state.articles.map((articleObj, key) => {二十条++；if (TwentyArticles > 20) { return;}返回 <RNEWS_Templating article={articleObj}/>})}</div></div></div></div>);}}ReactDOM.render(<RNEWS_Parent rArticles={rArticles}/>, document.getElementById("ace"));});}

这通常是由于网络不好导致没有正确下载和安装依赖项.

确保删除 node_modules 文件夹并运行 yarn cache clean 或 npm cache verify 以确保缓存已从损坏问题中修复.

现在再次安装您的依赖项 npm install 或 yarn 一切都应该正常工作.

I am trying to use webpack + react + electron, and when I type in the CLI "electron ." it gives me this error:

I deleted node_modules and re-installed all the modules over and over like about 6 times, obviously deleting node_modules and installing isn't a solution, so I need the community's help on finding this error.

package.json

{
  "name": "ElectronULTIMA",
  "version": "1.0.0",
  "description": "electron apps",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "babel": "babel",
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "electron": "^1.6.1",
    "electron-packager": "^8.5.2",
    "electron-prebuilt": "^1.4.13",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "electron": "^1.6.1",
    "electron-prebuilt": "^1.4.13",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-modal": "^1.7.1"
  }
}

main.js

const electron = require('electron');
const {app, dialog, Menu, Tray, BrowserWindow} = require('electron');
const remote = require('electron').remote;
const path = require('path');
const url = require('url');
const $ = jQuery = require('jquery');
const ipc = require('electron').ipcMain;
const fs = require('fs');
const AWS = require('aws-sdk');
const ep = new AWS.Endpoint('dynamodb.us-west-1.amazonaws.com');
const db = new AWS.DynamoDB.DocumentClient({      // Dynamo database constructor
    "apiVersion": '2012-08-10',
    "region": 'us-west-1',
    "endpoint": ep,
    "accessKeyId": '*censored*',
    "secretAccessKey": '*censored*'
});


// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
//  RENDER COMMUNICATION
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
let win; // Main project window
let rnews; // Rnews window

    win = new BrowserWindow({ width: 900, height: 700 });
    win.loadURL(`file://${__dirname}/index.html`);
    //win.openDevTools();




    // ----------------------------------------------------------------------------------- //
    // ----------------------------------------------------------------------------------- //
    // ----------------------------------------------------------------------------------- //
    // RNEWS WINDOW INSTANCE
    // ----------------------------------------------------------------------------------- //
    rnews = new BrowserWindow({ width: 620, height: 900, show: false, backgroundColor: '#2e2c29', title: '"R" News Articles' });
    // useContentSize (boolean)
    // RNEWS WINDOW VISIBILITY
    ipc.on('rnews', () => {
        rnews.loadURL(`file://${__dirname}/rnews/index.html`);
        //rnews.openDevTools();
        if (rnews.isVisible()) { rnews.hide(); }
        if (!rnews.isVisible()) { rnews.show(); }
    });



    win.on('closed', () => { win = null; });
    rnews.on('closed', () => { rnews = null; });
    rnews.on('ready-to-show', () => {
      rnews.show();
    });
}

// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
//  GLOBAL SCOPE
// ---------------------------------------------------------------------------------------------------------- //
// ---------------------------------------------------------------------------------------------------------- //
app.on('ready', MAIN_WINDOW);
// When the last window is closed
app.on('window-all-closed', () => {
    app.quit();
});
app.on ('activate', () => {
    if (win === null) {
        MAIN_WINDOW();
    }
});

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    entry: [
      './index.js'
    ],
    output: { path: __dirname, filename: './bundle.js' },
    resolve: { modules: ['node_modules', 'src'], extensions: ['.js'] },
    watch: true,
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                  presets: ['es2015', 'react']
                }
            }
        ]
    },
    target: "node",
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin()
    ]
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { InputGroup, Button, ButtonToolbar, ButtonGroup, FormControl, FormGroup, render } from 'react-bootstrap';
import ReactModal from 'react-modal';
const AWS = require('aws-sdk');
const ep = new AWS.Endpoint('dynamodb.us-west-1.amazonaws.com');
const db = new AWS.DynamoDB.DocumentClient({      // Dynamo database constructor
    "apiVersion": '2012-08-10',
    "region": 'us-west-1',
    "endpoint": ep,
    "accessKeyId": '*censored*',
    "secretAccessKey": '*censored*'
});


const GRAB_RNEWS_ARTICLES = new Promise((resolve, reject) => {
  db.scan({ TableName: 'Rnews' }, (error, articles) => {
    if (error) reject (error);
    resolve(articles);
  });
});

function RenderImage(props) {
  // If thumbnailOrNo is passed as a prop give it the class "rnewsThumbnails"
  if (props.thumbnailOrNo) {
    return (
      <img src={props.imageUrl} className="img-rounded rnewsThumbnails"></img>
    )
  } else {
    return (
      <img src={props.imageUrl} className="img-rounded"></img>
    )
  }
}





RNEWS();
function RNEWS() {
  GRAB_RNEWS_ARTICLES.then(rArticles => {

    $(function() {
      // Make all links open in new tab
      $("a").attr('target', '_blank');
    });

    class RNEWS_Templating extends React.Component {
      constructor(props) {
        super(props);
        // don't forget this.props.article is passed as an individual article
      }
      render() {
        let defaultImg = 'https://lh3.googleusercontent.com/-Lk5XNJRyFKw/AAAAAAAAAAI/AAAAAAAAAA0/xkk9_owpEhE/photo.jpg';
        return (
          <div className="panel panel-warning">
            <div className="panel-body">
              <div className="col-sm-2">
                <strong className="articlesource">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{this.props.article.source}</strong>
                <br />
                <RenderImage imageUrl={this.props.article.imgUrl || defaultImg } thumbnailOrNo="yes" />
              </div>
              <div className="col-sm-10">
                  <strong>Short title: </strong><span className="rnewsshorttitle"><font size="4">{this.props.article.title}</font></span>
                  <br />
                  <span className="rnewsdescription">{this.props.article.description}</span>
                  <br />
                <a href={this.props.article.url}>{this.props.article.url}</a>
              </div>
            </div>
          </div>
        );
      }
    }

    // ----------------------------------------------------------------------------------- //
    // RNEWS_Parent will hold the states
    // ----------------------------------------------------------------------------------- //
    class RNEWS_Parent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          articles: this.props.rArticles.Items,
          searchVal: "",
          titles: []
        }
        this.searchValueUpdater = this.searchValueUpdater.bind(this);
      }
      searchValueUpdater(e) {
        this.setState({ searchVal: e.target.value })
      }
      componentWillMount() {
        this.state.articles.map(article => {
          return this.state.titles.push(article.title);
        })
      }
      render() {
        // Will be used to show only 10 articles
        let TwentyArticles = 0;
        return (
          <div className="container">
            <div className="well row">
              <center>
                <font size="5">"R" News Articles (ascending order)</font>
              </center>
              <div>
                <h6>Total articles: <span className="goldenvalue">{this.props.rArticles.Count}</span></h6>
                <h6>Total scanned articles: <span className="goldenvalue">{this.props.rArticles.ScannedCount}</span></h6>
              </div>
              <FormGroup bsSize="sm" controlId="rnewsSearch" validationState="success">
                <FormControl
                  placeholder="Search for an article"
                  inputRef={(input) => { this.input = input; }}
                  onChange={this.searchValueUpdater}
                  >
                </FormControl>
              </FormGroup>
              <span>{this.state.searchVal}</span>
              <div>
                <h3><font color="magenta">&nbsp;&nbsp;&nbsp;&nbsp;Articles: </font></h3>
                <br /><br />
                <div className="col-sm-8">
                    {this.state.articles.map((articleObj, key) => {
                      TwentyArticles++;
                      if (TwentyArticles > 20) { return; }
                      return <RNEWS_Templating article={articleObj} />
                    })}
                </div>
              </div>
            </div>
          </div>
        );
      }
    }


    ReactDOM.render(<RNEWS_Parent rArticles={rArticles}/>, document.getElementById("ace"));
  });
}

This usually happens due to bad network so the dependencies aren't downloaded and installed correctly.

Make sure to delete node_modules folder and run yarn cache clean or npm cache verify to make sure the cache is healed from corruption issues.

Now install your dependencies again npm install or yarn and everything should work properly.

这篇关于Electron 无法正确安装，请删除 node_modules/并尝试重新安装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！