快速构建Electron+React+TypeScript

一、安装Node.js环境

二、构建React

安装create-react-app包

npm install -g create-react-app

然后选一块地构建react项目

cd D:/projects/electron+react+typescript
create-react-app my-app --template typescript

项目目录如下

my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── reportWebVitals.ts
│   └── setupTests.ts
├── tsconfig.json
├── package.json
├── package-lock.json
├── README.md

三、安装Electron

在PS终端输入

$env:ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"; npm install --save-dev electron

以安装Electron，同时还有electron-builder

npm install --save-dev electron-builder

四、创建文件

在src目录下创建electron.ts

import { app, BrowserWindow } from 'electron';
import path from 'path';
import url from 'url';

let mainWindow : BrowserWindow | null;

function createWindow()
{
    mainWindow = new BrowserWindow
    ({
        width: 800,
        height: 600
    });

    if (process.env.NODE_ENV === 'development')
    {
        mainWindow.loadURL('http://localhost:3000');
    }
    else
    {
        mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
    }

    mainWindow.on('closed', () =>
    {
        mainWindow = null;
    });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => 
{
    if (process.platform !== 'darwin')
    {
        app.quit();
    }
});

app.on('activate', () => 
{
    if (mainWindow === null)
    {
        createWindow();
    }
});

这里就是窗口的主逻辑。

由于electron本身不支持TypeScript，但是react支持TypeScript，所以需要写一个TS配置将electron.ts编译成electron.js。目录下的那个tsconfig.json是给react用的，需要新建一个配置文件electron-tsconfig.json（名字随便起）

{
    "compilerOptions": {
		"target": "ESNext",
		"module": "CommonJS",
		"outDir": "build",
		"rootDir": "src",
		"strict": true,
		"esModuleInterop": true,
		"skipLibCheck": true,
		"types": ["node", "electron"]
	},
	"include": ["src/electron.ts"]
}
  

这里rootDir指向存放源码（electron.ts）的目录，outDir是指输出目录，types要填写node和electron以供TypeScript识别。这里只编译electron.ts这一个文件（include项）

src/electron.ts ===编译===>build/electron.js

然后我们在package.json中绑定我们的electron入口：

"main": "build/electron.js",

再添加

"homepage": "./",

以确保react页面的加载

五、命令设置

在package.json的scripts中，有react事先部署好的四个命令：

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",

在下面添加：

"start-electron": "tsc -p electron-tsconfig.json && electron .",
"build-electron": "tsc -p electron-tsconfig.json",
"dist-release": "npm run build && npm run build-electron && electron-builder --dir --win --x64",
"dist-setup": "npm run build && npm run build-electron && electron-builder --win --x64"

start-electron用于启动electron，命令中先使用tsc按照自定义的用于electron的ts编译配置将electron.ts编译成electron.js，然后调用electron以当前目录（.）启动

build-electron用于构建electron，仅编译

dist-release用于构建发布版，命令中首先构建react，然后在调用build-electron构建electron，最后用electron-builder构建整个项目

dist-setup用于构建安装包

六、使用

一个ps终端用于运行react：npm run start

一个ps终端用于运行electron：npm run start-electron

然后electron就会把端口3000的react页面渲染出来

要是打包的话，dist-release导出不需要安装的包，dist-setup导出需要安装的包

这里还需要在根目录创建.npmrc并写入：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

electron-builder会自己下载一些文件，在这里指定下载镜像速度会快一点

electron-builder还需要做一些配置，在package.json下添加
 

  "build": {
    "appId": "com.example.app",
    "productName": "MyApp",
    "extends": null,
    "asar": true,
    "directories": {
      "output": "release"
    },
    "files": [
      "build/**/*",
      "dist-electron/**/*",
      "!node_modules/**/*",
      "!**/*.map"
    ],
    "win": {
      "target": "nsis",
      "artifactName": "${productName}-${version}-win-${arch}-Setup.exe"
    },
    "nsis": {
      "oneClick": false
    }
  }

这里extends: null用于取消默认的配置，否则electron-builder会默认按照publish/electron.js来寻找electron的主入口

这里使用nsis作为可安装程序的框架