What's?

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

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

DEVELOPMENT

web
js
yarn
parcel
riot

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

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

▶ 参考 Qiita記事

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のコマンドはここに乗ってます ▶ 参考 Qiita 記事 ありがとうございます。


riot やbabelを入れる

▶ 参考 Qiita 記事

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

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.