基於electron-react-redux的桌面程序製做

時間 2019-11-21

標籤基於 electron react redux 桌面程序製做欄目 React 简体版

原文原文鏈接

基於electron-react-redux的桌面程序製做

本文章將要講述怎麼將electron，react，redux結合起來，當中react+redux的結合很簡單，主要是與electron的結合
還有與webpack配合以及熱加載的配置css

有一個我本身作的demo也許會幫助到你html

步驟

首先咱們須要創建一個新的文件夾 mkdir my-electron-react-app && cd my-electron-react-app;node
而後咱們初始化一個 package.json ，npm initreact

將一下代碼複製進剛纔建立的 package.json 中webpack

{
  "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 文件git

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',
    publicPath: 'http://localhost:8080/built/'
  },
  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的文件github

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文件web

<!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文件npm

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的項目作好以後，就可以在命令窗口輸入命令了json
```
npm install
npm run watch
// 從新打開一個命令窗口以後找到文件夾
npm start
```

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。