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がいいかもしれません。

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus