react+electron+AntD编辑桌面应用
一、开发的首要任务，安装node环境https://nodejs.org/zh-cn/，需要自行下载
二、要下载react，有一个快捷的方法，创建react应用，使用脚手架，下载（可选择是否全局安装）：
npm install --global create-react-app
成功运行后会显示：
三、创建react项目：
create-react-app demo
新建完后，按着步骤执行：
先cd demo，然后 yarn start
如果你没有yarn，可以下载下，很好用的包管理工具：
npm install -g yarn
下载完在执行yarn start,如果不想下载，可以直接npm start,也可以出来下方的这个页面
四、.安装electron,
在刚创建好的react项目文件夹中（demo文件夹），打开命令行：
npm install electron --save
electron有两种进程，一个是主进程，一个渲染进程，所以必不可少的是main.js文件，
所以要在当前目录下，新建一个main.js:
注意：在main.js中的地址写的是localhost：3000，原因详见https://blog.****.net/zoepriselife316/article/details/88031218
const { app, BrowserWindow } = require('electron')
let win
function createWindow() {
// 创建浏览器窗口。
win = new BrowserWindow({ width: 800, height: 600 })
// 然后加载应用的 index.html。 url 及本地文件形式
win.loadURL('http://localhost:3000')
// win.loadFile('public/index.html')
// 打开开发者工具
win.webContents.openDevTools()
// 当 window 被关闭，这个事件会被触发。
win.on('closed', () => {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 与此同时，你应该删除相应的元素。
win = null
})
}
// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持**。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (win === null) {
createWindow()
}
})
// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
在package.json中，要进行修改：
{
"name": "react-electron-app01",
"version": "0.1.0",
"private": true,
"dependencies": {
"electron": "^4.0.6",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-scripts": "2.1.5"
},
"main":"main.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron-start":"electron ."
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
这些写完了以后，运行electron:
npm run electron-start
成功运行后,go on …
将public和src目录下的文件都删除，但是保留这俩文件夹，因为要用AntD进行页面的渲染；
五，下载AntD https://ant.design/docs/react/introduce-cn
yarn add antd
这样一来我们就在项目中引入了Ant-Design，但是我们还不能直接使用它，需要进行一些配置
安装react-app-rewired，这是一个自定义配置react项目的工具：
yarn add react-app-reqired --dev
然后修改根目录下的package.json:
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test --env=jsdom",
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject",
"electron-start": "electron ."
},
这样做的目的是让start、build、test三个命令使用我们自定义的React配置而不是使用默认的。
然后在项目根目录下创建一个config-overrides.js，用于书写自定义配置：
module.exports = function override(config, env) { return config;
};
安装babel-plugin-import，这是一个按需加载代码、样式的babel插件：
yarn add babel-plugin-import --dev
修改config-overrides.js：
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config); return config;
};
这样一来，Ant-Design就配置完了,配置完就可以在页面中使用了…
添加页面：
在public下新建一个html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>React+Electron+AntD-App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
这个文件将来将会作为Electron的入口网页文件
安装前端路由react-router-dom：
yarn add react-router-dom
安装完成之后，在src目录下新建一个入口js文件index.js、一个路由组件文件router.js，再创建一个文件夹叫page用于存储页面组件文件，里面再建立一个文件叫做index.js，用于存储首页组件,如下图：
目录内容：
src/index.html: 入口文件
import React from 'react';
import ReactDom from 'react-dom';
import { MainRouter } from "./router";
ReactDom.render(
<MainRouter/>,
document.getElementById('root')
);
src/router.js:以后添加新页面只需要在page中写一个新的页面组件文件，然后修改路由文件，在Switch中添加path与组件的对应关系即可。
import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import IndexPage from "./page/index.js";
export class MainRouter extends React.Component {
render() {
return (
<HashRouter>
<Switch>
<Route exact path={'/'} component={IndexPage} />
</Switch>
</HashRouter>
);
}
}
src/page/index.js: 首页的内容
import React from 'react';
import { DatePicker } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
export default class IndexPage extends React.Component {
onChange(date, dateString) {
console.log(date, dateString);
}
render() {
return (
// <Calendar onPanelChange={this.onPanelChange} />
<div>
<DatePicker onChange={this.onChange} />
<br />
<MonthPicker onChange={this.onChange} placeholder="Select month" />
<br />
<RangePicker onChange={this.onChange} />
<br />
<WeekPicker onChange={this.onChange} placeholder="Select week" />
</div>
)
}
}
写完以后，运行
yarn strat
这个应用环境就搭建成功了,在写这个代码的时候，我引入了antd，但是没有样式；
还提示我：The “injectBabelPlugin” helper has been deprecated as of v2.0.
injectBabelPlugin被损坏了，我就下载了几个包：
确保你安装’customize-cra’并[email protected]
确保你安装’less’和’less-loader’
yarn add less less-loader
yarn add customize-cra
yarn add [email protected]
然后修改config-overrides.js的文件，内容如下：
const {
override,
fixBabelImports,
addLessLoader,
} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { "@primary-color": "#1DA57A" }
})
);
重新运行yarn start
就出来了：
运行electron输入：
yarn electron-start
可以去写自己的样式和项目了，加油！
参考链接：https://www.imooc.com/article/39978
https://github.com/timarney/react-app-rewired/issues/348