基于electron-react-redux的桌面程序制作
本文章将要讲述怎么将electron,react,redux结合起来,当中react+redux的结合很简单,主要是与electron的结合 还有与webpack配合以及热加载的配置
有一个我自己做的demo也许会帮助到你
步骤
首先我们需要建立一个新的文件夹 mkdir my-electron-react-app && cd my-electron-react-app ;
然后我们初始化一个 package.json ,npm init
-
将一下代码复制进刚才创建的 package.json 中 {
"name": "xxx","version": "1.0.0","description": "","main": "index.js","devDependencies": {
"babel": "^5.6.10","babel-core": "^5.6.11","babel-eslint": "7.1.1","babel-loader": "^5.2.2","css-loader": "^0.15.1","electron": "^1.4.1","electron-packager": "^4.1.3","electron-rebuild": "^0.2.2","less": "^2.5.1","less-loader": "^2.2.0","node-libs-browser": "^0.5.2","prop-types": "^15.5.7","style-loader": "^0.12.3","webpack": "^1.9.12","webpack-dev-server": "^1.9.0"
},"dependencies": {
"electron-prebuilt": "^0.28.3","react": "^15.5.0","react-dom": "^15.5.0","react-redux": "^4.4.5","redux": "^3.5.2"
},"scripts": {
"test": "npm test","start": "./node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron .","watch": "./node_modules/.bin/webpack-dev-server","electron-rebuild": "./node_modules/.bin/electron-rebuild"
},"author": "xxx","license": "ISC"
}
-
创建一个webpack.config.js 文件 var webpack = require('webpack');
module.exports = {
entry: {
app: ['webpack/hot/dev-server','./app/index.js'],},output: {
path: './public/built',filename: 'bundle.js',publicPath: 'http://localhost:8080/built/'
},devServer: {
contentBase: './public',module: {
loaders: [
{ test: /.js$/,loader: 'babel-loader',exclude: /node_modules/ },{ test: /.css$/,loader: 'style-loader!css-loader' },{ test: /.less$/,loader: 'style-loader!css-loader!less-loader'}
]
},plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
-
然后我们需要在根目录创建一个index.js的文件 var app = require('app');
var BrowserWindow = require('browser-window');
require('crash-reporter').start();
app.on('window-all-closed',function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready',function() {
mainWindow = new BrowserWindow({width: 900,height: 500});
mainWindow.loadUrl('file://' + __dirname + '/public/index.html');
mainWindow.openDevTools();
mainWindow.on('closed',function() {
mainWindow = null;
});
});
-
然后我们创建一个public文件夹,在文件夹下创建一个index.html文件 <!DOCTYPE html>
<html>
<head>
<title>My Electron app</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<div id="root"></div>
</body>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/built/bundle.js"></script>
</html>
-
最后我们需要创建一个app文件夹,然后在app文件夹中创建一个index.js文件 import './less/main.less';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'react-redux';
import configureStore from './reducers/';
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,document.getElementById('root')
);
-
在这个app文件夹中就是我们的react+redux组合所在的地方,等你将一个简单的react+redux的项目做好之后,就能够在命令窗口输入命令了 npm install
npm run watch
// 重新打开一个命令窗口之后找到文件夹
npm start
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|