Parcel + Riot 高速で環境構築

5559 ワード
pug riot parcel riot テキストリンク

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

最後に

設定ファイル書かなくてもいいのはとても楽ですね。