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
-, , , ,

執筆者:

関連記事

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

1から学ぶReact-Redux

By: Ian Sane – CC BY 2.0 目次1 React-Reduxとは2 create-react-app3 電卓のロジック4 reactで電卓の外観を作る5 reduxでと …

Electronで簡単にMac風UI〜Photon

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

no image

Rails3.2でユーザー管理機能を追加2~Devise+AjaxDataTables

  前回 Rails3.2でユーザー管理機能を追加~Devise 参照 Railsでajaxなテーブルを使う~datatables   いままでAjaxでのデータ更新ができなかった …

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

  d3.jsにはlayoutというおおまかに準備されたレイアウトがあって、その中にあるTreeレイアウトを試してみることにした d3.js自身のapiリファレンスが階層構造になっているので …