JavaScript
webpack
hyperapp

hyperappのwebpack用テンプレート

こんにちは、鈴木です。Hyperappでウェブアプリケーションを作るためのテンプレートのようなものを作ったので、それの話です。
https://github.com/sosukesuzuki/hyperapp-boilerplate にて公開しています。動くものはコレ

使ったもの

  • hyperapp
  • webpack
  • eslint
  • stylus
  • pug
  • babel
  • CSSModules
  • JSX

おおまかにはこんな感じです。自分の好きなものをぶち込みました。html-webpack-pluginでpugをindex.htmlにしていて、stylus-loaderとstyle-loaderとcss-loaderでStylusでCSSModulesしています。vambooとスタイル周りは同じ感じです。

使い方

GH-Pagesでデプロイしてる関係で、masterブランチにはindex.htmlとbundle.jsをおいていて、ソースコードはsrcブランチにおいているので、それだけ考慮してもらえれれば大丈夫かなと思います。

git clone git@github.com:sosukesuzuki/hyperapp-boilerplate.git

cd hyperapp-boilerplate

git co src

rm -r .git

yarn

yarn run start

これでwebpack-dev-serverがlocalhost:8080で起動します。

使ってね

srcブランチにソースコードがあるんで、見てね。ハッカソンにでも出たら自分で使ってみようかなぁと思っています。個人的にhyperappの用途として、プロダクションで使うことは考えていなくて、ハッカソンや、一人で遊ぶ時にぱぱっとものを作れることしか考えていないので、その要件を満たす感じにしかしていないです。今後、routerとかの設定はしてもいいかもしれないですね。