Electron 学习

初始化

Demo 初始化

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start

项目初始化

create-react-app cloud-doc-ts --typescript
yarn eject
然后执行扩展库学习步骤

Elctron

项目安装依赖

安装 antd 库

yarn add antd
yarn add install babel-plugin-import --dev
修改package.json里面的 babel 部分的代码

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
},

然后 app.css 文件不需要手动引入 antd 的 css，直接 import { Button } from 'antd' 如此使用即可。

使用 Eject 方式在 create-react-app 中使用 Ant Design of React
参考资料：在 TS 中使用 antd
具体过程可见 React 学习笔记

安装插件

npm install --save-dev devtron
require('devtron').install()
window.__devtron = {require: require, process: process} (Disabled Node Integration 的情况下)

nodeIntegration 要设置为 true，奇怪明明文档说是默认为 true 的，但是不设置的话 Devtrom 这个插件就报错，提示说是设置为 false 了

mainWindow = new BrowserWindow({
width: 1600,
height: 1200,
webPreferences: {
    nodeIntegration: true,
    preload: path.join(__dirname, "preload.js")
    )
}
});

Devtron

扩展库学习

使用create-react-app创建完项目之后安装yarn add electromn，之后在项目根目录创建一个main.js文件。yarn add electron-is-dev 用于判断当前环境。

const { app, BrowserWindow } = require("electron");

const isDev = require("electron-is-dev");

let mainWindow;

app.on("ready", () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 680,
    webPreferences: {
      nodeIntegration: true
    }
  });
  const urlLocation = isDev ? "http://localhost:3000" : "https://www.baidu.com";
  mainWindow.loadURL(urlLocation);
});

package.json里面设置"main":"main.js"。
安装yarn add concurrently --dev 、 yarn add cross-env --dev 和 yarn add wait-on --dev。
然后添加三个命令： "ele": "electron ." "dev": "yarn start & yarn run ele" "dev:c": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && yarn ele\""
concurrently 这个库是用于输出全控制台 log 日志
wait-on 这个库用于在什么操作之后执行什么命令可以监听数种操作
cross-env 用于跨平台输入环境变量，这里环境变量的作用是不打开浏览器的 tab 页面

注意事项

在浏览器调试时候使用 node 的模块会报错 react 项目使用 window.require(‘’)来引入 node 模块。例如： const fs = window.require(‘fs’)。注意此时直接在浏览器端打开会报错可以使用兼容方式处理一下

参考资料

Electron 官方文档
 Electron 中文文档