Electron+React+Webpack+Vscode應用桌面開發平臺搭建
前提
先安裝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便可以運行了。