内容简介：看惯了网上各种全家桶，各种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 。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Smashing Book
Jacob Gube、Dmitry Fadeev、Chris Spooner、Darius A Monsef IV、Alessandro Cattaneo、Steven Snell、David Leggett、Andrew Maier、Kayla Knight、Yves Peters、René Schmidt、Smashing Magazine editorial team、Vitaly Friedman、Sven Lennartz / 2009 / $ 29.90 / € 23.90
The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create succes......一起来看看 《The Smashing Book》 这本书的介绍吧!
