parcelは設定ファイル不要の高速バンドラ。
今回は公式のものではありませんがparcel用のriotプラグインparcel-plugin-riotjsを使います。
##インストール
npm init -y
npm install --save riot parcel-bundler parcel-plugin-riotjs
##ディレクトリ構成
--index.html
--main.js
--app.tag
--package.json
コード
まずはindex.html。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parcel-Riot</title>
</head>
<body>
<app></app>
<script src="main.js"></script>
</body>
</html>
次にエントリーファイルを作ります。
main.js
import riot from 'riot'
import './app.tag' //ここでタグファイルを読み込む
riot.mount('app')
そしてタグファイル
app.tag
<app>
<h1>{ title }</h1>
this.title = 'Hello'
</app>
実行
package.jsonにこれを追加する
"scripts": {
"start": "parcel index.html"
},
npm startで実行。
そしてここにアクセスhttp://localhost:1234/
本当に設定ファイルとか書かずにできましたね。
##発展
たとえばriotで、pugで書きたいときとか、buble・babelの細かい設定をしたいときは.riotrc.jsというファイルを作成します。
まぁ 中身は公式のriot.config.jsと同じなので書き方は公式に任せます ->>> http://riotjs.com/ja/guide/compiler/
例としてpugを設定してみます。
まずはインストール npm i -S pug
.riotrc.js
const pug = require('pug')
module.exports = {
template: 'pug',
parsers: {
html: {
pug: html => pug.compile(html)
}
}
}
作成したら設定完了です！これでタグファイル内をpugでかけるようになります。
実行はいつも通りにnpm start
最後に
設定ファイル書かなくてもいいのはとても楽ですね。