超详实!带你一步步搭建Electron10+React16+Antd4架构工程

1,735 阅读10分钟

💡 为什么是免费试读版?

付费阅读的大环境,一方面很好保护了创作者的知识产权,另一方面提高了创作者的写作动力和内容质量。

本人的文章分为「免费版」和「付费版」。「免费版」主要为短平快的日常经验技巧技术分享,「付费版」篇幅较长,编排更加系统化,内容更加详实。

无论「免费版」和「付费版」,本人都是精心准备,反复验证校对,保证内容质量,坚持做好原创。

如果您对「免费试读版」的内容感兴趣,请关注作者微信公众号「卧梅又闻花」,阅读该付费文章。

❤️原创写作不易,您的支持是对作者最大的支持鼓励❤️

🌷🌷------试读开始------🌷🌷

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,确实非常方便。

github.com/nklayman/vu…

但是面对Electron如此之快的更新节奏,总依赖第三方工具往往无法使用最新版的Electron。与其天天期盼第三方工具更新,不如靠自己去搭建。所以在转战React后,就打算自己去搭建Electron+CRA标准开发环境,而不去使用electron-react-boilerplate 之类的项目模板。一来可以更自由地更新组件和制定项目架构,二来也是可以更深入Electron的使用,提高技术水平。

※注:

本文中的 CRA 表示 Create-React-App

代码区域每行开头的:

"+" 表示新增

"-" 表示删除

"M" 表示修改

通过本文你可以掌握:

  1. 使用Electron+CRA+Antd搭建标准化工程。
  2. 通过实现遍历本地目录下所有文件的Demo,掌握基于Electron开发本地应用的能力。
  3. 使用electron-builder打包windows、mac安装包。

本文使用的主要版本:

  1. node.js 12.19.0
  2. react 16.14.0
  3. antd 4.7.2
  4. 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 inityarn init
npm installyarn
npm install xxx --saveyarn add xxx
npm install xxx --save-devyarn add xxx --dev
npm install xxx --globalyarn global add xxx
npm uninstall xxx --saveyarn remove xxx
npm update --saveyarn 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官网:

ant.design/docs/react/…

到这里,项目的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镜像,把需要的文件自行下载下来:

npm.taobao.org/mirrors/ele…

写作本文时,使用的Electron版本是10.4.1,系统为macOS,所以先下载好以下两个文件:

  1. electron-v10.1.4-darwin-x64.zip
  2. 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架构工程》。