本文介紹了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"> {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"> 文章:</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"> {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"> 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模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！