yarn と parcel と riot を使って簡単な webサイトを作ってみた

yarn と parcel で roitを使ってみました。
yarnについてはこちらの記事を、parcelについてはこっちを診てもらうとすぐに理解できます。

ささっとやったことをメモしておこうと思います。

※参考
https://qiita.com/soarflat/items/3e43368b2d767c730781

yarnを導入

僕の場合、npmをndenvを使ってましたので、npmでインストールしました

$ npm install --global yarn


node のバージョンにより、warningができますが、気持ち悪いので、v8.0.0にしました。

warning You are using Node "7.9.0" which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: "^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0"


インストールしたらpathを通します。

$ vim ~/.bash_profile など


export PATH="$HOME/.yarn/bin:$PATH"



読み込んだら、

yarn -v
yarn init

で、バージョンを確認し、initします。

parcelを入れる

$ yarn add parcel-bundler 

実行すると、yarn.lockファイルと、npmと同じように、node_moduleが作成されます。
yarnのコマンドはここに乗ってます
https://qiita.com/morrr/items/558bf64cd619ebdacd3d
ありがとうございます。


riot やbabelを入れる

参考
https://qiita.com/jude/items/704c6d8603f0f5057b7e

yarn add riot
yarn add --dev babel-preset-es2015-riot

dir構成

- root
  - node_module
  - public(defaultだとdist)
  - src
    - images
    - javascript
      - module
      - tags
        - layouts
          - Top.tag
        - App.tag
      - app.js
    - stylesheet
      - styles.scss
    - index.html

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>title</title>
</head>
<body>
  <App></App>
  <script src="app.js"></script>
</body>
</html>


app.js

import '../stylesheets/main.scss'

import riot from 'riot'
import './tags' // riotによりprecompileされたファイルを指定しとく

riot.mount('*')


App.tag

<App>
  <Top />
  <script>
    import riot from 'riot'
  </script>
</App>


Top.tag

<Top>
  <p>{ text }</p>
  <script>
    this.text = "トップ"
  </script>
</Top>


scssをcssに

yarn add node-sass --dev


ここまででビルドしてみる

riot src/javascripts/tags src/tags.js

parcel src/index.html -d public


確認

public以下にfileが作成されており、

http://localhost:1234/

でブラウザで確認する

まとめ

結構簡単にできたかと思います。そこまで大掛かりなプロジェクトでない場合は、parcelがいいかもしれません。