内容简介：看惯了网上各种全家桶，各种X+Y+Z，今天我也来凑凑热闹，和大家一起聊一聊如何使用Webpack打包基于Electron+React开发的跨平台桌面应用。Electron是一个结合Node.js和Chromium实现的跨平台桌面应用解决方案，提供了操作系统访问Api，并赋予普通HTML网页访问Node.js本地模块的能力。使得掌握传统HTML、CSS和JS等技术的前端开发工程师，可以轻松的开发本地桌面应用。由于Electron基于Node.js，而Node.js本身具备跨平台特性，因此基于Electron
看惯了网上各种全家桶，各种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，主要负责整个应用的生命周期管理，以及主进程任务的分发等。
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多页面应用。
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中，如果直接使用以上配置文件打包，会出现类似报错：
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。
module.exports = {
target: 'electron-renderer'
};
然后，便是要考虑开发环境与生产环境的区别，为这两种环境设置不同的模式。
最后我们将前面的内容整合起来，便可得出一个基础的Electron应用的开发模板。源码请移步： https://github.com/mailzwj/webpack-electron 。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
付费：互联网知识经济的兴起
方军 / 机械工业出版社 / 2017-6-1 / CNY 59.00
关于互联网知识付费的首部作品 知识工作正在被重塑，知识经济正在开启互联网时代下半场 为你展现互联网知识经济全景大图，解读新物种的前世今生 内容简介 一个产业解读 三个分析工具 一组知识卡片 书是最早的知识载体，已有2000多年的付费历史，随着移动互联网的普及，新的知识经 济在今天爆发，知识的创造者和传播者从书后走到了书前，互联网知识经济正在拉开帷幕。知识的......一起来看看 《付费：互联网知识经济的兴起》 这本书的介绍吧!
