electron與react整合

咱們知道若是須要electron和vue.js開發，能夠經過electron-vue直接建立一個帶vue的electron的項目，那麼今天咱們來說講electron如何與react全家桶結合。

源碼地址：https://github.com/wenchangshou2/electrol-react-redux.git

安裝yarn

Yarn是facebook推出的一個更加靠近的的包管理工具。

mac下安裝

brew install yarn

Linux下安裝

在ubuntu中默認的包倉庫是沒有yarn的包的，咱們須要：

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

在咱們導入證書和源以後，能夠經過下列的命令直接安裝

sudo apt-get update && sudo apt-get install yarn

安裝create-react-app

create-react-app是一個建立react項目的工具，經過這個工具能夠快速建立一個初始的react項目。

yarn global add create-react-app

建立react項目

create-react-app app
cd app

添加electron

yarn add electron
yarn add electron-builder -D

安裝foreman幫助咱們在命令行下運行應用程序

yarn global add foreman

安裝create-react-app建立的項目依賴

yarn install

配置eslint

eslint配置你的代碼的規範，配合atom或者vs code，可以實時的觀測你的代碼風格是否符合規範。

touch .eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "jest": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
        "no-const-assign": "warn",
        "no-this-before-super": "warn",
        "no-undef": "warn",
        "no-continue": "off",
        "no-unreachable": "warn",
        "no-unused-vars": "warn",
        "constructor-super": "warn",
        "valid-typeof": "warn",
        "space-before-function-paren":"off",
        "function-paren-newline":"off",
        "no-plusplus":"off",
        "quotes": [
            2,
            "single"
        ]
    },
    "parser": "babel-eslint",
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ]
}

同時咱們須要安裝ESLint的相應的插件

yarn add eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-plugin-import

在通過上面的操做以後，咱們須要對package.json進行修改來適配electron

咱們暫時將內容修改爲下面的內容

{
  "name": "qiniu-upload",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "src/electron-starter.js",
  "dependencies": {
    "electron": "^1.8.4",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-scripts": "1.1.1",
  },
  "scripts": {
    "start": "nf start -p 3000",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-start": " node src/electron-wait-react",
    "react-start": "react-scripts start",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
  },
  "devDependencies": {
    "electron-builder": "^20.8.1"
  },
  "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    }
  }
}

上面的版本可能隨時在變，不用太介意，用最新的版本就能夠

上面的咱們將本來的start改爲了react-start，對於其餘的沒有作任何的改變，如今還須要添加electron的處理內容

"homepage": "./",
  "main": "src/electron-starter.js",

和

"build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    }
  }

修改以後最終的文件內容:

{
  "name": "qiniu-upload",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "src/electron-starter.js",
  "dependencies": {
    "electron": "^1.8.4",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.10.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.1",
    "redux": "^3.7.2"
  },
  "scripts": {
    "start": "nf start -p 3000",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-start": " node src/electron-wait-react",
    "react-start": "react-scripts start",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
  },
  "devDependencies": {
    "electron-builder": "^20.8.1"
  },
  "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    }
  }
}

如今咱們還須要在項目的根目錄下面建立一個名爲Procfile的文件，其內容以下：

react: npm run react-start
electron: npm run electron-start

繼續完善

如今咱們還須要完成src/electron-start.js以及src/start-react.js文件

src/electron-start.js

const electron = require('electron');
const { app, BrowserWindow } = electron;

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


let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });

  const startUrl =
    process.env.ELECTRON_START_URL ||
    url.format({
      pathname: path.join(__dirname, '/../build/index.html'),
      protocol: 'file:',
      slashes: true,
    });
  mainWindow.loadURL(startUrl);
  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

src/start-react.js

const net = require('net');
const childProcess = require('child_process');

const port = process.env.PORT ? process.env.PORT - 100 : 3000;

process.env.ELECTRON_START_URL = `http://localhost:${port}`;

const client = new net.Socket();

let startedElectron = false;
const tryConnection = () => {
  client.connect({ port }, () => {
    client.end();
    if (!startedElectron) {
      console.log('starting electron');
      startedElectron = true;
      const { exec } = childProcess;
      exec('npm run electron');
    }
  });
};

tryConnection();

client.on('error', () => {
  setTimeout(tryConnection, 1000);
});

啓動

如今咱們運行

yarn start

如今你發現了react將以本地應用程序的方式運行。

繼續耕耘

上面的是一個初級的demo，咱們如今須要繼續整合react redux,來實現一個官方的Todo功能

咱們下節內容來實現整合