1
我正在嘗試使用webpack + react + electron，並且當我輸入CLI「electron」時。它給了我這個錯誤：電子未能正確安裝，請刪除node_modules /然後再次嘗試安裝
我刪除node_modules又一遍地重新安裝所有的模塊，如約6倍，顯然刪除node_modules和安裝是沒有辦法了，所以我需要在社會各界的幫助找到這個錯誤。
的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"));
});
}
嘗試改變'目標： 「節點」''到目標：webpack.config.js中的「electron」 – wwv