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