electron + react开发一个简易的markdown云盘系列

前言

electron是一款可以让前端程序员开发桌面应用程序的技术（库），比如打开窗口，访问系统文件等等。还可以很好的和前端框架集成。

由于这个项目是本人毕设，借鉴于imook张轩老师的课程，基于此进行深度研究。代码写的不是很精简，希望各位进行矫正。

完成效果

项目搭建

React前端部分

• 用脚手架创建一个工程：

npm install create-react-app # if you don't have
create-react-app cloud-md-manager

• 安装antd，并配置按需引入

npm install antd 
npm install babel-plugin-import

创建.babelrc文件，在plugins中配置按需引入

[
    "import",
    {
       "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
    }
],

electron部分

• 安装electron

npm install electron # 个人不推荐npm和yarn，electron国内用cnpm
npm install electron-is-dev # 判断开发环境或者是生产环境

• 编写主进程main.js
  在项目根目录新建main.js，并编写主进程代码

const isDev = require('electron-is-dev');
const {BrowserWindow, app} = require('electron');
let mainWindiw;
app.on('ready', () => {
    const mainWindowConfig = {
            width: 1366,
            height: 768,
            show: false,
            webPreferences: {
                nodeIntegration: true // 集成node环境
            },
            backgroundColor: '#efefef'
            // frame: false 调试状态打开，正式环境关闭（无边框）
    };
    const urlLocation = isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, './dist/index.html')}`;
    
    mainWindow = new BrowserWindow(mainWindowConfig); // 创建window
    mainWindow.loadURL(urlLocation); // 加载前端
    mainWindow.center(); // 居中显示
    
    // 垃圾回收
    mainWindow.on('closed', e => {
        mainWindow = null;
    });
}

• 修改package.json
  安装concurrently、wait-on、cross-env简便操作

+ "main": "main.js" # 设置主进程入口
  "scripts": {
+     "dev": "concurrently \"wait-on http://localhost:3000 && electron ./main.js\" \"cross-env NODE_ENV=development BROWSER=none npm start\"",
  }

接下来就可以使用命令npm run dev进行项目的开发。

结语

本系列很长，会定期更新。由于我也还在肝毕设，所以更新会有延迟，但能保持一天至少一更。项目代码见cloud-doc-editor，这个毕设我还做了其他的，比如编辑markdown、上传markdown到云端等等，所以项目代码还在更新。多多支持