前不久看到一个 vue + electron + typescript 的项目，我最近正好在加深学习 react 于是我萌生出一个想法使用 react + electron + typescript 搭建一个跨平台 PC GUI 项目

首先我得先搭建一个 react + ts ( typescript 的简写 ) 的项目

根据 TypeScript 中文手册文档搭建：https://typescript.bootcss.com/tutorials/react.html

安装 create-react-app ，我们之所以使用 create-react-app 是因为它能够为 React 工程设置一些有效的工具和默认参数。 它仅仅是一个用来搭建 React 工程的命令行工具而已。

npm install -g create-react-app

创建新工程，首先创建一个叫做 my-app 的新工程，带上 --scripts-version=react-scripts-ts 即可创建一个 ts react 项目：

create-react-app my-app --scripts-version=react-scripts-ts

# 如果询问是否安装 react-scripts-ts 相关组件选择 Y （是） 就好了…

此时的工程结构应如下所示：

my-app/
├─ .gitignore
├─ node_modules/
├─ public/
├─ src/
│  └─ ...
├─ package.json
├─ tsconfig.json
└─ tslint.json

创建好 ts react 项目之后，在项目中添加 electron

先是在项目根目录添加一个 app.js 文件（ 例如：https://github.com/zmide/react-electron-typescript-demo/blob/master/app.js ） ：

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 440,
    height: 760,
    webPreferences: {
      // preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('./build/index.html')
  mainWindow.loadURL('http://localhost:3000')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) createWindow()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

这个就是 electron 的入口配置文件

在 package.json 的 devDependencies 中加入 electron 的引入

npm install --save-dev electron

也可以全局安装一下

npm insatll -g electron

安装之后，在 package.json 中加入相关执行脚本和 main 文件的指向（例如：https://github.com/zmide/react-electron-typescript-demo/blob/master/package.json）：

{
  "main": "app.js",
  "scripts": {
      "electron": "node node_modules/electron/cli.js ."
  },
    "devDependencies": {
        "electron": "^6.0.7"
    }
}

现在启动应该能看到 hello world 了

npm run satrt
# 启动 react 

npm run electron
# 启动程序

代码我放 Git Hub 了有兴趣的小伙伴可以去看看 （ 喜欢的小伙伴可以点点 Star ）：https://github.com/zmide/react-electron-typescript-demo/

现在我只是讲了一下怎么配置程序和启动程序，下一篇博客看看怎么打包 electron 程序吧