Electron + React + Flow を1から試してみる

やること

boilerplate等を使えば、簡単に使いやすくなっていますが、
結構色々なものが入っていて一つ一つの動きが理解しづらかったので、
一旦1から試してみる。

環境

MacOS 10.12
Node.js v7.4
npm 4.0.5
yarn 0.23.2

Electron

まずはElectronのインストール。
グローバルインストールしたくない場合はプロジェクト内にインストールでもOKです。

npm install -g electron

mkdir project
cd project
npm init

package.json

"main": "app.js",
"scripts": {
    "start": "electron ."
},

一部抜粋。mainスクリプトがapp.js(好きな名前でOK)、scripts.start を electron . に設定する。
これで npm start で electron . が走るようになります。

$ npm install --save electron

electronモジュールを入れます。saveオプションでpackage.jsonに記録します。

mainスクリプトであるapp.jsを作ります。

app.js

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

let mainWindow

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

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

app.on('ready', createWindow)

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

$ npm start

これで空ページが出ればElectronの起動はOKです。

React

React導入に必要なモジュールを入れます。
React本体とコンパイルに必要なWebpackとbabelです。

$ yarn add react react-dom babel-core
$ yarn add babel-loader babel-preset-react webpack -D

ビルド用のwebpackの設定ファイルを作ります。

webpack.config.js

module.exports = {
  entry: './app/src/index.js',
  output: {
    filename: 'renderer.js',
    path: __dirname + '/app/dist'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.jsx', '.js']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

output.pathは相対パスが使えないので注意が必要です。
__dirnameでルートディレクトリが取れます。

package.json

"scripts": {
  "build": "./node_modules/webpack/bin/webpack.js --config ./webpack.config.js",
 }

buildコマンドを作ります。yarnで入れたwebpackを設定ファイル指定で叩きます。 npm run build でビルドできます。

シンプルなReactを使ったファイルを作ってビルドします。

index.js

import React from 'react'
import { render } from 'react-dom'

const Test = () => <div>test</div>


render(
  <Test />,
  document.getElementById('root')
)

$ npm run build

これでdist/renderer.jsにビルド結果が出力されます。
Reactの導入はこれで完了です。

flow

次にflowを入れます。

flowコマンドを使えるようにします

$ brew install flow
$ npm -g install flow-typed
$ yarn add flow-bin flow-typed -D

flowコマンドと型定義を取得するflow-typedコマンドを入れ、
devDependenciesにflow-bin, flow-typedを入れます。

$ flow init

.flowconfigファイルができます。

.flowconfig

[ignore]
.*/node_modules/.*
[include]

[libs]

[options]

node_modules以下はチェックする必要ないのでignoreに入れます。
処理時間が変わってきます。

$ flow-typed install

導入しているモジュールの型定義が取得できます。

// @flow

jsファイルの先頭に@flowのコメントがあることがflowの検査対象設定となります。

let num: number;
num = "a"

例えばこう書いて flow コマンドを実行すると

app/src/index.js:8
  8: num = "a"
           ^^^ string. This type is incompatible with
  7: let num: number;
              ^^^^^^ number

こうやって指摘してくれるようになります。

まとめ

とりあえず何が必要なのかは理解できたのかなと思います。
環境構築で困るケースもあるかと思うので、どなたかの理解の手助けになればと思います。