【原创】Webpack+Electron+React小记

看惯了网上各种全家桶,各种X+Y+Z,今天我也来凑凑热闹,和大家一起聊一聊如何使用Webpack打包基于Electron+React开发的跨平台桌面应用。

Electron是一个结合Node.js和Chromium实现的跨平台桌面应用解决方案,提供了操作系统访问Api,并赋予普通HTML网页访问Node.js本地模块的能力。使得掌握传统HTML、CSS和JS等技术的前端开发工程师,可以轻松的开发本地桌面应用。由于Electron基于Node.js,而Node.js本身具备跨平台特性,因此基于Electron开发的桌面应用程序也具备很好的跨平台能力,可以很好的适配Windows、MacOS和Linux等操作系统。

Electron除了支持几乎全部的Node.js功能,还提供很多内置模块,这些模块大致可以分为三类:仅供主进程使用的主进程模块(如:app,ipcMain等)、仅供渲染进程使用的渲染进程模块(如:ipcRenderer等),以及可以同时供主进程和渲染进程引用的模块,我称之为公共模块(如:clipboard等)。

一个Electron应用的入口文件通常被命名为main.js,主要负责整个应用的生命周期管理,以及主进程任务的分发等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const { app, BrowserWindow } = require('electron');
let win;
const createWindow = () => {
win = new BrowserWindow({width: 800, height: 600});
const indexPageURL = `file://${__dirname}/index.html`;
win.loadURL(indexPageURL);
win.on('closed', () => {
win = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (!win) {
createWindow();
}
});

我们先来看一个最基础的Electron应用实例:

如前文所述,Electron是使用我们前端开发工程师所熟知的HTML、CSS和JS来开发桌面应用,自然我们就可以使用各种前端框架和打包工具来开发和管理我们的Electron应用,比如接下来即将讲述的Webpack+React。

现如今前端开发越来越趋向于单页应用,很多工具也都提供了打包单页应用的功能,特别是在移动端页面中,单页应用更是盛行。但是在Electron应用中却更适合选择比较传统的多页面模式。因为,在桌面应用中多以窗口的形态存在,每个窗口就对应一个完整的界面,而在Electron中,一个界面就可以对应一个HTML页面。

现在,我们来搭建一个Webpack+React多页面应用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('mini-css-extract-plugin');
const outputPath = path.resolve(__dirname, '../dist');
module.exports = {
entry: {
index: path.resolve(__dirname, '../app/pages/index.js'),
login: path.resolve(__dirname, '../app/pages/login.js')
},
output: {
path: outputPath,
filename: 'js/[name].js',
chunkFilename: 'js/[name].bundle.js'
},
module: {
rules: [{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
options: {
presets: ["es2015", "react", "stage-0"]
}
},
exclude: /node_modules/
}, {
test: /\.(css|less)$/,
use: [
{
loader: ExtractTextPlugin.loader,
options: {
publicPath: outputPath + '/css'
}
}, {loader: 'css-loader'}, {loader: 'less-loader'}
]
}, {
test: /\.(png|jpe?g|gif)/,
use: [{
loader: 'url-loader',
options: {
limit: 8192,
name: 'images/[name].[ext]',
publicPath: outputPath
}
}]
}
]
},
plugins: [
new htmlPlugin({
title: 'Index',
template: 'app/tpl.html',
chunks: ['common', 'index'],
chunksSortMode: 'manual',
filename: 'index.html'
}),
new htmlPlugin({
title: 'Login',
template: 'app/tpl.html',
chunks: ['common', 'login'],
chunksSortMode: 'manual',
filename: 'login.html'
}),
new ExtractTextPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css"
})
]
};

简单说明一下,为了使用一些最新的特性,而现在的浏览器内核并没有完全支持这些新特性,因此我们通常需要使用babel-loader来进行转义,让我们的新特性在现在的浏览器中可以正常运行。因此,我们需要安装babel、babel-loader、以及es2015、react以及stage-0等辅助插件。当然,兼容程度可以根据自己的情况设置,设置state-0/1/2/3都可以。

另外,为了更好的编写和维护CSS样式,我们通常会使用LESS、SCSS等预编译语言,而且为了尽量减小前端整体资源大小,通常我们还会对JS、CSS进行压缩,因此我们还需要:less-loader、css-loader、style-loader和mini-css-extract-plugin等插件。

最后就是处理我们在界面布局过程中使用到的图标、图片文件,因此再加上url-loader和file-loader,基本功能就完成了。

接下来,我们再把React和Electron整合起来,一个Webpack+Electron+React的基本应用模型就搭建好了。

首先要做的就是让Webpack打包配置支持Node.js模块,因为Node.js模块不存在于node_modules中,如果直接使用以上配置文件打包,会出现类似报错:

1
2
3
4
5
6
ERROR in ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/YS/Desktop/webpack-electron/node_modules/electron'
@ ./node_modules/electron/index.js 1:9-22
@ ./app/components/Login/index.js
@ ./app/pages/login.js
...

所幸,Webpack早就考虑到了此类问题,并且提供了target配置项,用于指定打包的目标应用类型。比如眼下我们要打包Electron应用,就需要将target设置为electron-renderer。

1
2
3
module.exports = {
target: 'electron-renderer'
};

然后,便是要考虑开发环境与生产环境的区别,为这两种环境设置不同的模式。

最后我们将前面的内容整合起来,便可得出一个基础的Electron应用的开发模板。源码请移步:https://github.com/mailzwj/webpack-electron