electron で webpack とか使ってアプリ作った #Vue.js

electron の clipboard API 使ってクリップボードを監視するアプリ作りました
クリップボード監視先輩 zaftzaft/cbsnpi

使ったもの

ビルドツールには webpack
タスクランナーは gulp
プリプロセッサ類は CoffeeScript, Jade, Stylus
それらに Vue.js を加えてモダンな感じにしました。

ディレクトリ構成

src/            プリプロセッサ系
  coffee/
  jade/
  stylus/
dist/           ファイルの出力先

build/          中間ファイル置き場
  dist/
release/        最終的な生成物
  v0.0.1/

release ディレクトリは、win32-x64.zip など配布物の出力先に使用します
一応バージョンごとに切っておきます

全体の流れ

インストール

electron の動作環境を作る
http://electron.atom.io/docs/v0.31.0/tutorial/quick-start/ の main.js を丸コピペで保存
gulp, webpack, etc を入れる

開発

gulp で watch & build しながらコード書いて electron . で動作確認

配布

配布したい段階になったら main.js, package.json を build/ へコピー
webpack で本番ビルドして build/dist へ保存、Jade, Stylus も圧縮ビルドして build/dist へ
electron-packager で build をパッケージ化
$ electron-packager ./build appName --platform=win32,linux --arch=x64 --version=0.31.1 --asar
build/appName-linux-x64, build/appName-win32-x64 とか生成されるので、それらを zip とか bz2 で圧縮して release へぶち込む

electron と webpack を使う上での注意

webpack.config に target: "atom" を書く必要があります
そうすることで、fs とかの node.js ビルトインモジュールを electron 側で require できます

webpack.config.coffee

module.exports =
  entry:
    app: ["./src/coffee/app.coffee"]
  output:
    filename: "bundle.js"
  target: "atom"

webpack の本番ビルド

webpack を uglify で圧縮するとめちゃくちゃ時間がかかるので、開発時は無圧縮、配布時に圧縮といった感じにします

webpack.config 内で __product プロパティ以下に本番用の追加設定を書きました

webpack.config.coffee

webpack = require "webpack"

module.exports =
  # 中略
  __product:
    plugins: [
      new webpack.optimize.UglifyJsPlugin
        compress:
          warnings: false
        sourceMap: false
        mangle: true
    ]

gulp 側では webpack, build-webpack とタスクを分けました

gulpfile.coffee

webpackConfig = require "./webpack.config.coffee"
webpackProductConfig = _.extend {}, webpackConfig, webpackConfig.__product

gulp.task "webpack", ->
  gulp
    .src "./src"
    .pipe $.webpack webpackConfig
    .pipe gulp.dest "./dist"

gulp.task "build-webpack", ->
  gulp
    .src "./src"
    .pipe $.webpack webpackProductConfig
    .pipe gulp.dest "./build/dist"

その他

画面が一つだったので、 vue でちゃちゃっとやるだけでデスクトップアップリケーションが出来てよかった
アプリはレポートの参考文献を楽に書きたかったから作った
配布物のサイズがデカイのでキツイ
配布物生成を sh で書いたけど、なんか良くないのでいい感じにしたい。
windows と linux でしか動作確認してないので Mac だと動かないかもしれないです。