Parcel+Riot 開発環境構築 #JavaScript

＊追記 18/2/22　＊
riot用のプラグインが出て、もっと簡単にできるようになったよhttps://qiita.com/jude/items/76dcce54b920537d3e1a
＊＊＊＊＊＊＊＊＊＊
初投稿です！お手柔らかにお願いします。

webpack時代の終わりとparcel時代のはじまりという記事があって、parcelという設定不要のバンドラーがあるらしいのでriotで試してみたいと思います。

自分の環境

Windows 10 home
node.js v8.9.1
npm 5.5.1

パッケージ

npm init -y
npm install -g parcel-bundler riot
npm install --save-dev babel-preset-es2015-riot riot

コード書いていく

ディレクトリ構成

-root
   -package.json
   -src
     -app　　　　　　　　　<<<<ここにタグファイルを入れる
       -app.tag
     -main.js
     -index.html

コード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Riot,Parcel</title>
</head>
<body>
  <app-root></app-root>
  <script src="main.js"></script>
</body>
</html>

main.js

import riot from 'riot'
import './app/tags' //riotのコンパイラで出力されたtags.js

riot.mount('app-root')

app.tag

<!-- const riot = require('riot')  -->　
<app-root>
  <h4>{ title }</h4>

  <script>
    // 入れないとriot is not definedと怒られます requireの場合は外側に書く
    import riot from 'riot' 

    this.title = 'Hello, World'
  </script>
</app-root>

コマンドにriot src/app/ src/app/tags.jsを実行するとsrc/app/内のタグファイルを全てコンパイルし、src/app/tags.js(コンパイル後のファイル)を出力します。

parcel src/index.htmlで依存しているhtml,css,js,babel等を見つけてバンドルしてくれます。ローカルサーバもたちます.

便利！

設定ファイル

package.json

・・・
  "scripts": {
    "start": "npm run build & npm run bundle",
    "bundle": "parcel src/index.html",
    "build": "riot src/app/ src/tags.js"
  },
・・・

実行

npm startを実行して、http://localhost:1234/ にアクセス。
Hello,Worldと表示されれば成功です.

まとめ

riotコマンドでtagファイルをjsファイルにコンパイルし、parcelでバンドルするだけで、特別なことはしてないです。