React + Babel + Sass + Gulp + Bower な Electron Boilerplate #React

また新しい Electron Boilerplate が増えました。

https://github.com/superbrothers/electron-boilerplate

これから何か作ろうと思って必要そうなものを詰め込んでいます。

package.json

{
  "name": "electron-boilerplate",
  "version": "1.0.0",
  "description": "A electron app template with React, babel, sass, gulp and bower",
  "main": "main.js",
  "scripts": {
    "gulp": "gulp",
    "bower": "bower",
    "lint": "gulp eslint",
    "dev": "gulp build && (electron .tmp & gulp watch)",
    "release": "NODE_ENV=production gulp release",
    "test": "echo \"noop\" && exit 0",
    "precommit": "npm run lint"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/superbrothers/electron-boilerplate.git"
  },
  "author": "Kazuki Suda <kazuki.suda@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/superbrothers/electron-boilerplate/issues"
  },
  "homepage": "https://github.com/superbrothers/electron-boilerplate#readme",
  "dependencies": {
    "react": "^0.14.0-rc1",
    "react-dom": "^0.14.0-rc1"
  },
  "devDependencies": {
    "babel-core": "^5.8.24",
    "bower": "^1.5.2",
    "del": "^2.0.0",
    "electron-packager": "^5.1.0",
    "electron-prebuilt": "^0.31.1",
    "eslint": "^1.3.1",
    "eslint-plugin-react": "^3.3.1",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.2.1",
    "gulp-eslint": "^1.0.0",
    "gulp-inject": "^1.5.0",
    "gulp-install": "^0.5.0",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "husky": "^0.10.1",
    "main-bower-files": "^2.9.0",
    "merge-stream": "^1.0.0",
    "require-dir": "^0.3.0",
    "run-sequence": "^1.1.2"
  }
}

% tree .
.
├── LICENSE.txt
├── README.md
├── bower.json
├── gulp
│   ├── bower.js
│   ├── build.js
│   ├── clean.js
│   ├── copy.js
│   ├── eslint.js
│   ├── html.js
│   ├── release.js
│   ├── scripts.js
│   ├── styles.js
│   └── watch.js
├── gulpfile.babel.js
├── package.json
└── src
    ├── index.html
    ├── main.js
    ├── scripts
    │   ├── ReactApp.js
    │   └── app.js
    └── styles
        ├── main.scss
        └── vendor.scss

4 directories, 21 files

開発をはじめる

% git clone https://github.com/superbrothers/electron-boilerplate.git && cd electron-boilerplate
% npm install && npm run bower -- install
% npm run dev

アプリケーションの開発には React + Babel を利用しています。src/ にアプリケーションのソースコードが入っていますのでここからいじっていってください。スタイルには Sass を使っています。React のインラインスタイルのみではまだツラいことも多いので。

npm run dev はスクリプトなどのビルドを実行後、アプリケーションを実行します。Gulp watch タスクによってファイルの変更を監視して再ビルドを行うようになっていますので、必要に応じてアプリケーション上で ⌘ R でリロードしてください。

Gulp

ビルドツールには Gulp を利用しています。JSX、Sass のビルド、Electron アプリケーションのパッケージなどのタスクを定義しています。 gulp/ を参照してみてください。

Bower

最近あまり聞かなくなったような気もしますが、Bower を利用しています。サンプルのアプリケーションではフォントをインストールしていますが、TW Bootstrap を利用する場合も bower で管理するようにしています。Bower でインストールされる CSS, Sass ファイルは Gulp の bower タスクで src/styles/vendor.scss に自動でインポートされるようになっています。もしインポートされるファイルを変更したい場合は、bower.json の overrides で再定義することが可能です。またフォントやイメージなどのファイルは Gulp copy タスクでパッケージビルド時に集めるようになっています。これらの仕組みは main-bower-files を利用していますのでこちらも参照してみてください。

https://github.com/ck86/main-bower-files

パッケージを作成する

% npm run release

パッケージの作成には electron packager を利用しています。ターゲット OS などの変更は Gulp release タスクを変更するようにしてください。

release タスクは dev タスク時と同様のビルドを実行後アプリケーションの実行に必要な npm パッケージのみのインストールを行なっています。npm install --production が実行されるので、実行に必要なパッケージは dependencies に、ビルドツールなどは devDependencies に追加するようにしてください。

ビルドが成功すると release/ にパッケージが作成されているはずです。

https://github.com/maxogden/electron-packager

さいごに

この Boilerplate はこれからアプリケーションを作ろうと思う自分が今後楽できるように作りました。けっしてここで力尽きないようになにかしら形にします。