Help us understand the problem. What is going on with this article?

Parcel + Riot 高速で環境構築

More than 1 year has passed since last update.

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/

本当に設定ファイルとか書かずにできましたね。:thumbsup:

発展

たとえば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

最後に

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

elastic
何もわからない
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした