Electron桌面应用构建指南
技术栈
-
react
-
react-router-dom
-
electron
-
ant design
搭建过程
添加镜像源
根目录添加 .yarnrc文件
registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"
初始化react
1：用create-react-app 初始化一个react应用
create-react-app pound-system
2：安装依赖并启动项目
<!--安装依赖-->
yarn install
<!--启动项目-->
yarn start
接入electron
1：安装electron依赖
yarn add electron --dev
2：在./public 文件夹下 创建electron.js
const { app, BrowserWindow } = require('electron');
// window对象的全局引用
let mainWindow
function createWindow() {
mainWindow = new BrowserWindow({ width: 800, height: 600 })
// 开发环境
// mainWindow.loadURL('http://localhost:3000/');
// 生产环境
mainWindow.loadFile(`${__dirname}/index.html`);
// 打开开发者工具，默认不打开
// mainWindow.webContents.openDevTools()
// 关闭window时触发下列事件.
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow);
// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})
3：配置package.json 添加 如下属性
{
"main": "public/electron.js",
"homepage": "./",
"scripts":{
"electron-dev": "electron ."
}
}
4：启动桌面程序
yarn electron-dev
接入react-router-dom
1：安装依赖
yarn add react-router-dom
2：修改App.js文件
import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';
import './App.css';
import Home from './pages/home';
import About from './pages/about';
// 入口app
const App = () => {
return (
<Router>
<header className="header">
<NavLink to="/">首页</NavLink>
<NavLink to="/about">关于我们</NavLink>
</header>
<div className="App">
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
};
export default App;
3：在pages文件夹下 创建几个测试页面 home.js 、 about.js
// home.js
import React from 'react';
export default () => {
return <div>Home</div>;
};
// about.js
import React, { useEffect } from 'react';
export default () => {
useEffect(() => {}, []);
return <div>about</div>;
};
4：测试页面点击即可切换路由
接入sass模块化
create-react-app本身支持sass模块化 我们只需按照规范编写就可以了
1：安装依赖
yarn add sass-loader node-sass
2：修改home.js页面 添加引用路径并添加className
import React from 'react';
import styles from './index.module.scss';
export default () => {
return <div className={styles.main}>Home</div>;
};
3：创建对应的index.module.scss
.main{
color:blue;
}
4：预览效果 即可看到home也得字体变成蓝色了
接入ant design
1：安装依赖
yarn add antd
2：直接在home页引入 antd组件
import React from 'react';
import styles from './index.module.scss';
import { Button, message } from 'antd';
export default () => {
return (
<div className={styles.main}>
Home
<Button onClick={() => message.warn('您点击了我们的提示信息')}>点击提示</Button>
</div>
);
};
3：在全局css index.css 引入样式
@import '~antd/dist/antd.css';
4：预览home页即可成功应用
项目打包
这里采用electron-builder进行打包
1：安装依赖
yarn add electron-builder --dev
2：配置打包参数
在package.json中
添加or修改如下属性
{
"scripts":{
"dist-win32": "electron-builder --win --ia32",
"dist-win64": "electron-builder --win --x64",
"dist-mac": "electron-builder --mac"
},
"main":"build/electron.js",
"description": "项目描述",
"author": {
"name": "katte",
"email": "[email protected]",
"url": "https://github.com/katteXu"
},
"build": {
"productName": "my-project",
"appId": "org.my-project.electron-react-antd",
"directories": {
"output": "dist"
},
"files": [
"build/**/*"
],
}
}
详细配置参数可参考 electron-builder
3：打包react代码
先构建react代码到build文件夹
yarn build
4：打包electron安装包
<!--mac环境-->
yarn dist-mac
<!--windows环境-->
yarn dist-win64
5：验证
mac环境 --> dmg安装包
windows环境 --> exe安装包
分别安装验证即可
问题及解决方案
1：yarn 安装electron会有问题
根目录下添加.yarnrc文件配置镜像即可解决
2：本来想应用less模块化样式 不过默认create-react-app 不支持 需要自行修改一些配置
修改配置可百度查询 create-react-app less关键字
3：安装node-sass可能会有报错
根目录下添加.yarnrc文件配置镜像即可解决
4：create-react-app 中文文档
https://www.html.cn/create-react-app/docs/getting-started/
5：electron-builder打包下载慢可参考知乎大神的文章
https://zhuanlan.zhihu.com/p/110448415
6：打包mac安装包代码签名问题
https://segmentfault.com/a/1190000012902525