＊追記 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でバンドルするだけで、特別なことはしてないです。