💡 为什么是免费试读版?
付费阅读的大环境,一方面很好保护了创作者的知识产权,另一方面提高了创作者的写作动力和内容质量。
本人的文章分为「免费版」和「付费版」。「免费版」主要为短平快的日常经验技巧技术分享,「付费版」篇幅较长,编排更加系统化,内容更加详实。
无论「免费版」和「付费版」,本人都是精心准备,反复验证校对,保证内容质量,坚持做好原创。
如果您对「免费试读版」的内容感兴趣,请关注作者微信公众号「卧梅又闻花」,阅读该付费文章。
❤️原创写作不易,您的支持是对作者最大的支持鼓励❤️
🌷🌷------试读开始------🌷🌷
Electron是一个基于Chromium和 Node.js,可以使用 HTML、CSS和JavaScript构建跨平台应用的技术框架,兼容 Mac、Windows 和 Linux。虽然B/S是目前开发的主流,但是C/S仍然有很大的市场需求。受限于浏览器的沙盒限制,网页应用无法满足某些场景下的使用需求,而桌面应用可以读写本地文件、调用更多系统资源,再加上Web开发的低成本、高效率的优势,这种方式越来越受到开发者的喜爱。本文主要分享如何使用Electron和Create-React-App搭建桌面客户端开发工程。React技术栈的小伙伴不要错过哟~
目录 - 先睹为快
先来看看本次分享都包含哪些干货:
1 前言
2 搭建基础工程
-
2.1 创建标准化react项目
-
2.2 精简项目
-
2.3 暴露webpack
-
2.4 支持Sass/Less/Stylus
3 集成Ant Design
-
3.1 安装Ant Design
-
3.2 实现Antd按需加载
-
3.3 自定义Antd主题颜色
4 集成Electron
-
4.1 通过国内镜像加速安装Electron
-
4.2 通过缓存加速安装Electron
-
4.3 配置Electron
-
4.4 启动electron dev热更新模式
5 实现递归遍历文件夹内文件
-
5.1 主进程开发
-
5.2 渲染进程开发
-
5.3 查看初步效果
-
5.4 使用Antd渲染列表
6 打包Electron
-
6.1 安装electron-builder
-
6.2 配置electron-builder
-
6.3 禁止生成map文件
-
6.4 配置发布版本的主入口
-
6.5 build Electron应用
-
6.6 设置开发环境icon
-
6.7 设置build版icon
7 其他常用配置
-
7.1 APP窗口大小
-
7.2 取消跨域限制
-
7.3 取消菜单栏
1 前言
目前业内前端项目主要基于Vue、React进行开发。本人在之前使用Vue做项目的时候,曾于2019年7月份在本公众号「卧梅又闻花」发表过《手把手教你使用Electron5+vue-cli3开发跨平台桌面应用》。感慨前端技术实在发展太快,时隔一年多,Vue3.0已经发布,Electron更新到了版本10。而本人也转战React技术栈。在之前使用Electron+Vue开发项目的时候,使用的是vue-cli-plugin-electron-builder,确实非常方便。
但是面对Electron如此之快的更新节奏,总依赖第三方工具往往无法使用最新版的Electron。与其天天期盼第三方工具更新,不如靠自己去搭建。所以在转战React后,就打算自己去搭建Electron+CRA标准开发环境,而不去使用electron-react-boilerplate 之类的项目模板。一来可以更自由地更新组件和制定项目架构,二来也是可以更深入Electron的使用,提高技术水平。
※注:
本文中的 CRA 表示 Create-React-App
代码区域每行开头的:
"+" 表示新增
"-" 表示删除
"M" 表示修改
通过本文你可以掌握:
- 使用Electron+CRA+Antd搭建标准化工程。
- 通过实现遍历本地目录下所有文件的Demo,掌握基于Electron开发本地应用的能力。
- 使用electron-builder打包windows、mac安装包。
本文使用的主要版本:
- node.js 12.19.0
- react 16.14.0
- antd 4.7.2
- electron 10.1.4
2 搭建基础工程
2.1 创建标准化react项目
执行命令。创建一个标准CRA工程:
npx create-react-app electron-cra
2.2 精简项目
接下来,删除一般项目中用不到的文件,最简化项目。
├─ /node_modules
├─ package.json
├─ /public
| ├─ favicon.ico
| ├─ index.html
- | ├─ logo192.png
- | ├─ logo512.png
- | ├─ mainfest.json
- | └─ robots.txt
├─ README.md
├─ /src
- | ├─ App.css
| ├─ App.js
- | ├─ App.test.js
- | ├─ index.css
- | ├─ index.js
- | ├─ logo.svg
- | ├─ serviceWorker.js
- | └─ setupTests.js
└─ yarn.lock
删除后的目录结构如下,清爽许多:
├─ /node_modules
├─ /public
| ├─ favicon.ico
| ├─ index.html
├─ /src
| ├─ App.js
| └─ index.js
├─ package.json
├─ README.md
└─ yarn.lock
逐个修改以下文件:
src/App.js
import React from 'react'
function App() {
return (
<div className="App">
<h1>This is Electron CRA App.</h1>
</div>
)
}
export default App
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Electron CRA</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
运行效果如下:
一通删改之后干干净净的,真的太痛快了。
2.3 暴露webpack
create-react-app默认情况下未暴露配置文件。要更灵活配置项目,需要将配置文件暴露出来。
create-react-app 2.0+ 本身支持sass,eject是为了支持less、stylus以及后续集成Antd并实现按需加载等用途,如果不需要,则可不用eject。
执行以下命令,暴露配置文件:
※注意:暴露配置的文件的操作不可逆!
执行:
yarn eject
如果之前没有提交git的话,可能会报以下错误:
Remove untracked files, stash or commit any changes, and try again
需要先在项目根目录下执行,提交git:
git add .
git commit -m "初始化项目(备注)"
稍等片刻,eject成功,目录变化如下:
+ ├─ /config
+ | ├─ /jest
+ | ├─ env.js
+ | ├─ getHttpsConfig.js
+ | ├─ modules.js
+ | ├─ paths.js
+ | ├─ pnpTs.js
+ | ├─ webpack.config.js <-- webpack配置文件
+ | └─ webpackDevServer.config.js
├─ /node_modules
├─ /public
| ├─ favicon.ico
| └─ index.html
+ ├─ /scripts
+ | ├─ build.js
+ | ├─ start.js
+ | └─ test.js
├─ /src
| ├─ /common <-- 全局公用目录
| ├─ /components <-- 公共模块组件目录
| ├─ /pages <-- 页面组件目录
| ├─ App.js <-- 项目主模块
| └─ index.js <-- 项目入口文件
├─ package.json
├─ README.md
└─ yarn.lock
eject完成后再运行一次工程,检查下是否成功:
yarn start
踩过的坑:
安装依赖包最好使用yarn命令,如果使用cnpm install,eject后再yarn start可能会报错:
Cannot find module 'babel-loader'
还有可能其他各种包丢失,总之别用cnpm。
2.4 支持Sass/Less/Stylus
工欲善其事必先利其器,这么高大上的react怎能好意思用最原始的css搭配呢,下面分别讲述下如何支持Sass/Less/Stylus。
开始前先复习下yarn与npm命令对比:
npm命令 | 对应的yarn命令 |
---|---|
npm init | yarn init |
npm install | yarn |
npm install xxx --save | yarn add xxx |
npm install xxx --save-dev | yarn add xxx --dev |
npm install xxx --global | yarn global add xxx |
npm uninstall xxx --save | yarn remove xxx |
npm update --save | yarn upgrade |
2.4.1 支持Sass/Scss
eject后,虽然package.json以及webpack.config.js里有了sass相关代码,但是要正确使用Sass/Scss,还要再安装node-sass。
执行以下命令:
yarn add node-sass --dev
安装完成后,项目已支持Sass/Scss。
2.4.2 支持Less
支持Less稍微多一点步骤,首先安装less和less-loader:
yarn add less less-loader --dev
然后修改config/webpack.config.js:
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
+ const lessRegex = /\.less$/;
+ const lessModuleRegex = /\.module\.less$/;
...(略)
// Opt-in support for SASS (using .scss or .sass extensions).
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'sass-loader'
),
},
+ // 支持less
+ {
+ test: lessRegex,
+ exclude: lessModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 3,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ },
+ 'less-loader'
+ ),
+ sideEffects: true,
+ },
+ {
+ test: lessModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 3,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ modules: {
+ getLocalIdent: getCSSModuleLocalIdent,
+ },
+ },
+ 'less-loader'
+ ),
按照以上操作后,项目已支持less。
2.4.3 支持Stylus
支持Stylus跟Less完全一样,首先安装stylus和stylus-loader:
执行以下命令:
yarn add stylus stylus-loader --dev
安装完成后,按照上一小节介绍的支持less的方法,修改config/webpack.config.js:
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
+ const stylusRegex = /\.styl$/;
+ const stylusModuleRegex = /\.module\.styl$/;
...(略)
+ // 支持stylus
+ {
+ test: stylusRegex,
+ exclude: stylusModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 3,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ },
+ 'stylus-loader'
+ ),
+ sideEffects: true,
+ },
+ {
+ test: stylusModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 3,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ modules: {
+ getLocalIdent: getCSSModuleLocalIdent,
+ },
+ },
+ 'stylus-loader'
+ ),
完成后重启项目,引入stylus文件可以正常解析了。
3 集成Ant Design
Ant Design是非常好用的前端UI库,很多项目都使用了Ant Design。
Ant Design官网: ant.design/index-cn
3.1 安装Ant Design
执行:
yarn add antd
3.2 实现Antd按需加载
Ant Design的样式非常多,但项目中可能只使用了其中个别组件,没有必要加载全部样式。可以使用babel-plugin-import实现样式的按需加载。
安装babel-plugin-import:
yarn add babel-plugin-import --dev
修改package.json:
"babel": {
"presets": [
"react-app"
],
+ "plugins": [
+ [
+ "import",
+ {
+ "libraryName": "antd",
+ "style": "css"
+ }
+ ]
+ ]
}
然后修改src/App.js 来验证下Antd:
import React from 'react'
+ import { Button } from 'antd'
import './style.styl'
function App() {
return (
<div className="App">
<h1>This is Electron CRA App.</h1>
+ <Button type="primary">Button</Button>
</div>
)
}
export default App
可以看到Antd的Button组件正常显示出来了,而且Antd的页面reset样式也生效了。
3.3 自定义Antd主题颜色
Antd 的样式使用了 Less 作为开发语言,如果想自定义Ant Design的主题颜色,需要先让项目支持Less(已在2.4.2章节介绍)。
修改config/webpack.config.js:
if (preProcessor) {
+ let preProcessorOptions = {
+ sourceMap: true,
+ }
+ if (preProcessor === "less-loader") {
+ preProcessorOptions = {
+ sourceMap: true,
+ //自定义主题
+ lessOptions: {
+ modifyVars: {
+ 'primary-color':' #ce9b13', // 自定义全局主色,金色
+ },
+ javascriptEnabled: true,
+ },
+ }
+ }
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
{
loader: require.resolve(preProcessor),
M options: preProcessorOptions
}
);
}
如果你的less版本较低,可能会报错
options has an unknown property 'javascriptEnabled'. These properties are valid:
object { lessOptions?, prependData?, appendData?, sourceMap? }
处理方法要么升级less及less-loader版本,要么按照当前less版本的要求进行配置。旧版less应该是没有lessOptions这个属性,可以将modifyVars及javascriptEnabled移到lessOptions这一级,然后删除lessOptions。
更多主题颜色配置请参考Antd官网:
到这里,项目的Web版本架构搭建完成了。下面进入Electron环节。
4 集成Electron
如果你可以科学上网,并且网速够快,那安装Electron就非常方便了。执行以下命令即可安装:
yarn add electron --dev
Electron相对来说有点大,如果不能科学上网,还有其他几种加速下载的方式。
4.1 通过国内镜像加速安装Electron
将yarn源修改为国内taobao镜像。
yarn config set registry https://registry.npm.taobao.org/
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
然后安装electron:
yarn add electron --dev
4.2 通过缓存加速安装Electron
根据照Electron官方说明,Electron下载的核心文件会存放在缓存中,下次再下载的时候会先去缓存中查找是否已经下载,如果已下载,则不会重新下载了。
electron官方说明: github.com/electron/ge…
所以我们可以去taobao镜像,把需要的文件自行下载下来:
写作本文时,使用的Electron版本是10.4.1,系统为macOS,所以先下载好以下两个文件:
- electron-v10.1.4-darwin-x64.zip
- SHASUMS256.txt
如果是windows系统,请按照以上方式下载好对应的文件。
然后分别给每个下载好的文件创建文件夹,命名规范Electron官网已说明。
如果yarn源已修改为taobao镜像,则文件夹的名称则为“去掉冒号和斜杠的文件下载地址(版本号前加个"v")+文件名”。
然后放在缓存目录中,各系统对应的Electron缓存目录如下:
Linux:$XDG_CACHE_HOME或~/.cache/electron/
MacOS:~/Library/Caches/electron/
Windows:$LOCALAPPDATA/electron/Cache或~/AppData/Local/electron/Cache/
4.2.1 MacOC缓存方式
下载的文件地址:
https://npm.taobao.org/mirrors/electron/10.1.4/electron-v10.1.4-darwin-x64.zip
https://npm.taobao.org/mirrors/electron/10.1.4/SHASUMS256.txt
其目录的名称就是:
httpsnpm.taobao.orgmirrorselectronv10.1.4electron-v10.1.4-darwin-x64.zip
httpsnpm.taobao.orgmirrorselectronv10.1.4SHASUMS256.txt
文件的存放位置就是:
~/Library/Caches/electron/httpsnpm.taobao.orgmirrorselectronv10.1.4electron-v10.1.4-darwin-x64.zip/electron-v10.1.4-darwin-x64.zip
~/Library/Caches/electron/httpsnpm.taobao.orgmirrorselectronv10.1.4SHASUMS256.txt/SHASUMS256.txt
同理,如果你没有修改为taobao镜像,还是使用默认设置,那electron会从GitHub下载,其文件夹名称就是:
httpsgithub.comelectronelectronreleasesdownloadv10.1.4electron-v10.1.4-darwin-x64.zip
httpsgithub.comelectronelectronreleasesdownloadv10.1.4SHASUMS256
然后执行安装命令,迅速完成安装:
yarn add electron --dev
4.2.2 Windows缓存方式
下载的文件地址:
https://npm.taobao.org/mirrors/electron/10.1.4/electron-v10.1.4-win32-x64.zip
https://npm.taobao.org/mirrors/electron/10.1.4/SHASUMS256.txt
其目录的名称就是:
httpsnpm.taobao.orgmirrorselectronv10.1.4electron-v10.1.4-win32-x64.zip
httpsnpm.taobao.orgmirrorselectronv10.1.4SHASUMS256.txt
文件的存放位置就是:
C:\Users\你的系统用户名\AppData\Local\electron\Cache\httpsnpm.taobao.orgmirrorselectronv10.1.4electron-v10.1.4-win32-x64.zip\electron-v10.1.4-win32-x64.zip
C:\Users\你的系统用户名\AppData\Local\electron\Cache\httpsnpm.taobao.orgmirrorselectronv10.1.4SHASUMS256.txt\SHASUMS256.txt
然后执行安装命令,迅速完成安装:
yarn add electron --dev
4.3 配置Electron
先配置入口文件,修改package.json:
🌷🌷------试读结束------🌷🌷
如果您对本次分享感兴趣,请关注我的微信公众号「卧梅又闻花」,继续阅读《超详实!带你一步步搭建Electron10+React16+Antd4架构工程》。
🎈后续精彩章节-试读结束
4.3 配置Electron
4.4 启动electron dev热更新模式
5 实现递归遍历文件夹内文件
5.1 主进程开发
5.2 渲染进程开发
5.3 查看初步效果
5.4 使用Antd渲染列表
6 打包Electron
6.1 安装electron-builder
6.2 配置electron-builder
6.3 禁止生成map文件
6.4 配置发布版本的主入口
6.5 build Electron应用
6.6 设置开发环境icon
6.7 设置build版icon
7 其他常用配置
7.1 APP窗口大小
7.2 取消跨域限制
7.3 取消菜单栏
8 结语
本次分享篇幅较长,在Windows和MacOS反复调试验证,确实花了很长时间精心整理,希望可以为你节约很多探索的时间。
如果您对本次分享感兴趣,请关注我的微信公众号「卧梅又闻花」,继续阅读《超详实!带你一步步搭建Electron10+React16+Antd4架构工程》。