JavaScript node.js

Gulp+WebpackでElectronのライブリロード

投稿日:

electron-connect

前につくった環境をアップデートしたら大変だったのでメモ

package.json

結果、開発環境で使ったライブラリ.

.babelrc

babelはバージョン7から、@babel/coreをつかう.
babel-loaderのバージョン8は、babelのバージョン7以上が必要なので、@babel/coreのほうを使わなければならない.
で、presetのほうもそれに対応したものをつかう.

webpack.config.coffee

前はbrowseryを使っていたのをwebpackに変えた.

gulpfile.coffee

gulpはバージョン4がこの春にでたぽい.今はgulp@nextをつけなくても、バージョン4がインストールされる.
gulp4では、gulp.taskは単なる関数をexportsする方法でもよくなった.
exportsすると、gulp indexとかで指定のタスクを実行できる.
gulp-watchの第2引数の方は、単なる関数の方を実行している.
exports先の方のタスクはなぜか実行できなかった.

Electronでは、mainプロセスのほうとrendererプロセスのほうの開発に分けられるけど、
mainプロセスのほうはnode.jsなのでたぶんbabelでトランスコンパイルしなくてもes2016のままでいける.
rendererプロセスのほうはchromeをつかってるので、基本babelでトランスコンパイルする.
そのほかcssや画像などのパッキングも含めて、rendererプロセスのほうはwebpackにまかせる.
mainプロセスのほうは、gulpでcoffeescript2をコンパイルして、移動させる.

webpack-streamはエラーが出ても、gulpが止まらないように設定する.

React.jsがつかえるか試してみる

React Treebeardというコンポーネントを試してみた.ほぼREADMEのまま.

-JavaScript, node.js
-, , , ,

執筆者:

関連記事

Electronのアプリケーションメニューからセーブダイアログを出してファイルを保存

By: Jean-Pierre Dalbéra – CC BY 2.0 目次1 はじめに2 require3 メニュー4 gulpfile.coffee5 できた はじめに 今後は、Ele …

Electronで簡単にMac風UI〜Photon

By: Patrick Hoesly – CC BY 2.0 目次1 Photon2 gulpfile.coffee3 index.scss4 Todolistに適用する5 できた Pho …

no image

位置情報通知の使いみちアイデアメモ

    ここまでHTML5とGoogle Mapsを使った位置情報通知を試してきたけど、その使いみちについてメモしておきたい 目次1 カレログ的なサービス2 宝探し的なイベント3 …

Ubuntu12.04にnode6.9をインストール~nodebrew

By: Kazuyoshi Kato – CC BY 2.0 目次1 nodebrew自身のアップデート2 nodebrewでnode6.9をインストール3 yarnのインストール nod …

ElectronでTrayアイコン

By: Cooks & Kitchens – CC BY 2.0 目次1 Tray2 main.coffee3 できた Tray github.com/atom/electron