前提

先安裝nodejs, NPM, vscode，electron

原始碼

從原始碼開始

下載程式碼以後，在程式碼的根路徑執行

>npm install

然後進行，生成app目錄

>webpack

執行

>electron app

從零開始

建立demo資料夾，在demo目錄下面，執行命令

>npm init

跟著guide，初始化package.json檔案。

然後引入開發時所需要的依賴

>npm install --save-dev babel babel-core babel-preset-es2015 babel-preset-react
>npm install --save-dev css-loader style-loader less-loader babel-loader webpack copy-webpack-plugin
 

>npm install --save-dev electron-prebuilt
>npm install --save-dev react react-dom

第一部分依賴是ES6語法相關的。

第二部分依賴是webpack相關的。webpack可以將js，css等檔案打包，壓縮，還可以將jsx和babel轉義為es5的語法。必須要對jsx和babel轉義，當前瀏覽器和nodejs是還無法支援jsx和es6。

第三部分是electron的開發環境。

第四部分是react依賴。

建立專案結構

使用vscode，開啟目錄demo，在demo下面建立src目錄。我們的原始碼將放在src下面。

Electron的JS主要分兩個程序，一個是main process，一個是render process。Main process是程式的主程序，當需要展示桌面的時候，主程序會開啟一個render程序。render程序包裝了chromium，起了一個類似chrome的程式展示html，執行js。

在src下面，ui目錄中放的屬於render程序的程式碼，jsx放react jsx程式碼，backend放屬於主程序的程式碼。

Webpack打包

webpack可以對babel和jsx進行轉義，並打包壓縮。我們只對屬於UI程序的js和css進行打包和壓縮，而對主程序的程式碼不壓縮。主程序程式碼跑在nodejs的環境中，webpack打包會破壞__dirname和__filename機制。

在demo的根目錄下建立webpack.config.json。

var path = require('path');
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var APP_PATH = path.resolve(__dirname, 'app');
var SRC_PATH = path.resolve(__dirname, 'src');

module.exports = {
    cache: true,
    target: 'electron',
	
    devtool: 'source-map',
    entry: {
        ui: './src/ui/ui'
    },
    output: {
        path: APP_PATH,
        filename: '[name].js',
        chunkFilename: '[chunkhash].js',
        sourceMapFilename: '[name].map'
    },
    module: {
        loaders: [
            {
                test: /\.js|\.jsx?$/,
                loader: 'babel-loader',
                include: [SRC_PATH],
                query: {
                    presets: ['es2015', 'react'],
                }
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}
        ]
    },
    plugins: [
        new webpack.optimize.DedupePlugin(),
        //new webpack.optimize.UglifyJsPlugin({comments: false}),
        new webpack.EnvironmentPlugin(["NODE_ENV"]),
        new CopyWebpackPlugin([
            { from: path.resolve(SRC_PATH, 'main.js'), to: 'main.js' },
            { from: path.resolve(SRC_PATH, 'backend'), to: 'backend' },
            { from: path.resolve(SRC_PATH, 'ui/index.html'), to: 'index.html' },
            { from: path.resolve(SRC_PATH, 'package.json'), to: 'package.json' }
        ])
    ]
};

將不需要壓縮的靜態檔案，使用copy外掛進行復制。

執行命令 

> webpack

程式將被複制到app目錄下面。

執行程式

> electron app

除錯

首先，如果每次修改程式碼，都需要重新編譯app才能執行，這種開發效率很低，可以使用下面的命令。當src下面的程式碼有變動是，webpack會自動編譯到app。

> webpack --watch

UI程序的程式碼可以使用chrome自帶的dev tools來除錯。

對於main程序，我們可以使用v8的debug協議在vscode中除錯。

啟動electron的debug模式，程式碼會停在第一行，遠端debug埠5858.

> electron --debug-brk=5858 app

在vscode中，點選“debug”。點選綠色的三角，按照引導，建立launch.json

現在再一次點選綠色的三角，就可以debug桌面程式了。

打包成exe

下載electron的原始碼，使用自己的icon，將electron重新build成自己的brand。

然後使用asar工具，將自己的app打成asar包，asar可以保護程式碼不被其他人看到。然後將asar包複製到electron\resources\app.asar。

點選xxx.exe便可以運行了。