Riot.js 試してみた
Angular・React・Vue・Svelte と同様、SPA フレームワークである Riot.js を試してみた。
試してみたソースコードは以下に置いている。
Riot.js が用意する create-riot を npm init で使うと良い感じにプロジェクトが構築できる。
# 今回は GitHub で作ったリポジトリ内に作っていく
$ git clone https://github.com/Neos21/practice-riot.git
$ cd practice-riot/
# 次のコマンドで Riot.js プロジェクトが自動的に作れる
$ npm init riot
npx: 179個のパッケージを8.003秒でインストールしました。
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (practice-riot)
version: (1.0.0) 0.0.0
description: Practice Riot.js
entry point: (index.js)
test command:
git repository: (https://github.com/Neos21/practice-riot.git)
keywords:
author:
license: (MIT)
About to write to /Users/Neo/practice-riot/package.json:
{
"name": "practice-riot",
"version": "0.0.0",
"description": "Practice Riot.js",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Neos21/practice-riot.git"
},
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/Neos21/practice-riot/issues"
},
"homepage": "https://github.com/Neos21/practice-riot#readme"
}
Is this OK? (yes) y
# 次のプロンプトで SPA を選ぶ
? Please select a template …
Webpack Project Template
Parcel Project Template
Rollup Project Template
Simple Component
❯ SPA (Webpack) Project Template
Custom Template (You will need to provide a template path to your template zip file)
# 選択した後
✔ Please select a template · webpack-spa
⠋ Downloading the template files
✔ Downloading the template files
✔ Unzipping the file downloaded
✔ Deleting the zip file
✔ Copying the template files into your project
✔ Deleting the temporary folder
✔ Template successfully created!
# 以下のファイル群が勝手にできた
$ tree -a
.
├── .gitignore
├── LICENSE
├── index.html
├── package-lock.json
├── package.json
├── readme.md
├── src
│ ├── app.riot
│ ├── components
│ │ ├── global
│ │ │ ├── my-component
│ │ │ │ ├── my-component.riot
│ │ │ │ └── my-component.spec.js
│ │ │ └── sidebar
│ │ │ ├── sidebar.riot
│ │ │ └── sidebar.spec.js
│ │ └── includes
│ │ ├── loader
│ │ │ └── loader.riot
│ │ └── user
│ │ ├── user.riot
│ │ └── user.spec.js
│ ├── index.js
│ ├── pages
│ │ ├── about.riot
│ │ ├── home.riot
│ │ └── not-found.riot
│ ├── pages.js
│ └── register-global-components.js
└── webpack.config.js
# `package.json` に沿ってインストールする
$ npm install
# とりあえず動く
$ npm start
# テストもできる
$ npm test
$ npm run cov-html
# ビルドすると JS 関連が `dist/` 配下にできる
$ npm run build
…という感じで、とりあえず動くモノはできた。コレを Netlify や Vercel のような、サブドメイン形式の環境にデプロイしてホスティングすると、うまく動くはず。
自分は GitHub Pages にデプロイしてみようと思ったのだが、パスの調整がしきれず、なんだか上手く動いていない。そこが残念。
Riot.js は素の Webpack を結構ゴリゴリに使っているので、Webpack ちからがないとそういうところが直しきれない。
Riot のファイルは、Vue における .vue ファイルのように、.riot というファイルで、1コンポーネントの HTML・CSS・JS がまとめられている。記法はシンプルで、必要十分。覚えることが少なく済み、ローカルで試す限りは動作も軽量高速だったので、本気で使おうと思えばかなり優秀かも。
