Electron+React+Webpack+Vscode应用桌面开发平台搭建

来源：互联网发布：点数图软件编辑：程序博客网时间：2024/05/17 03:03

https://my.oschina.net/xpbug/blog/637864

摘要: 作为一个java程序员，如果要开发桌面，则需要使用swing，awt。c++程序员则会用mfc，或c#。这些技术要不太过古老，要不太难用，要不市场上相关的人才太少。自从nodejs出来以后，js开始走向后端。市面上也出现了一些使用js+html开发应用桌面的技术，例如nwjs和electron（Atom和vscode编辑器都是基于electron开发的）。由于前端资源充足，开发效率高，界面更加美观，且容易移植多平台，使用js+html技术开发桌面将会越来越流行。本文将重点描述如何搭建开发的平台，不涉及技术知识讲解。

前提

先安装nodejs, NPM, vscode，electron

源代码

https://github.com/xpbug/electron-react-webpack

从源代码开始

下载代码以后，在代码的根路径执行

>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' }        ])    ]};