書籍「Riot.jsで簡単Webアプリ開発」読書メモ

SPAを構築できるライブラリの入門書を現在読んでます。
リンクは、なるたけOfficial Siteへのリンクを張ることにします。

npmコマンド

はServer Side JavaScript(Node.js)から利用できるPackage管理ツール。Packageとは、下記1. - 3. をまとめたもの

1. module
2. command executable
3. both of the above items

CLI documentation | npm Documentation

1. はC言語のlibrary, Rubyのlibraryに相当。このコマンドは、おそらくdpkg(Debian Package, 1993), apt(Advanced Package Tool, 1999)からヒントを得ている。Debianは2人の人名から合成された造語。

npxコマンド

とは、localにinstallされたPackageに含まれるコマンドをPATH解決して実行する便利ツール。
Packageはglobal install, local install(selected by default)を選べる。後者を選択すれば、installを実行したフォルダ内のnode_modulesフォルダ内にPackageが配置され、node_modulesフォルダを削除すれば綺麗さっぱり、後片付けが出来る。
Packageをinstallすれば、時に200MB - 300MBのDisk容量を消費するので、試しにPackageを使ってみる場合にはlocal installを選択するのが得策。
npx - npm

コマンド実行例

a.sh

> npx yarn -v
npx: 1個のパッケージを1.893秒でインストールしました。
1.22.5

yarnコマンド

こいつは、Yet Another npmコマンド。書籍のサンプルサイト(下記リンク)のコードを動かすのに必要。
kkeeth/riot4-book-example-apps

In-browser compilation

コンポーネントファイル(riotファイル)をブラウザ内でコンパイルしながら実行できる。
下記リンクは、online JavaScript IDEでの例。
Plunker - riot4 template

Vue.jsなんかは、bundler(e.g. webpack)を使ってvueファイルをコンパイル後に実行する。しかし、Riot.jsはそれとは異なる実行手段を提供してくれている。
コンパイラ · Riot.js

moduleの作製とその呼出、Package作製用package.jsonの記述

次のコードmain.jsでは、index.jsファイルに記述したFoo moduleを利用している。

import Foo from '../index';

const obj = new Foo();
obj.bar //  => "OK"

index.jsファイルはつぎの様になる。moduleオブジェクトのexportsプロパティーにコンストラクタ関数Fooを登録すればmoduleになる。

function Foo() {
    this.bar = function() {
        return "OK";
    };
}
module.exports = Foo;

Foo moduleをPackageにするには、package.jsonファイルを用意する。
開発時のみに使用するmoduleをdevDependenciesプロパティーに、開発時+本番時に使用するmoduleをdependenciesに記述する。

e.g. (package.json)

{
...
  "devDependencies": {
    "@riotjs/hot-reload": "^4.0.0",
    "@riotjs/parcel-plugin-riot": "^4.0.1",
    "parcel-bundler": "^1.12.4"
  },
  "dependencies": {
    "riot": "4.11.0",
  }
}