Riot.js v4 CLI

Riot.js Advent Calendar 2019 の11日目が空いていたので埋めます。

Riot command line tool

@riotjs/cli
普段使うことはないですが、プロジェクトでのCI/CDを考えたら必要になる時が来る。ハズ。
今は複数人で各ページを開発して、特定の人がビルド＆デプロイという流れになっている。
引き出し確保のためにも一度勉強しておきます。（でもその時がきたらWebpack使うんだろうな）
@riotjs/cli Version 4.0.3の内容で記載します。

コマンド説明

書式

riot [オプション] [対象ファイル|対象ディレクトリ]...
オプションは省略可能
ファイルは複数指定可能
ディレクトリを指定することも可能

説明

Riot.js のファイルをこのriotコマンドでプリコンパイルすることが出来ます。
先にnpm i @riotjs/cli -gでインストールしておきます。

オプション

-o, --output

Output directory where your javascript files will be generated

riot -o [出力先ディレクト] [対象ファイル|対象ディレクトリ]...
JavaScriptファイルを生成する出力先ディレクトを指定します。
このオプションを指定しない場合はカレントディレクトリに出力されます。

例

> riot -o dist hello.riot
hello.riot -> dist\hello.js

-f, --format

Specify output format - either: amd, cjs, esm, iife, or umd - default: esm

riot -f [出力形式] [対象ファイル|対象ディレクトリ]...
JavaScriptの出力形式を指定します。
指定できる出力形式はamd, cjs, esm, iife, umd。
このオプションを指定しない場合はesmで出力されます。

例

> riot -f umd hello.riot
hello.riot -> c:\hello.js

補足

1. amd : (Asynchronous Module Definition)
   define, return
   非同期, フロントエンド向け

2. cjs : (CommonJS)
   require, module.exports
   同期, バックエンド向け

3. esm : (ES Modules)
   import, export
   標準モジュール, 多くの最新ブラウザで動作, シンプルに記述できる

4. iife: (Immediately Invoked Function Expression)
   (function () { }());
   即時実行関数式

5. umd: (Universal Module Definition)
   module.exports, define
   フロントエンドとバックエンド向け(amd+cjs), ESMのフォールバックとして使われる傾向

-e, --extension

Change riot components file extension - default: riot

riot -e [拡張子] [対象ファイル|対象ディレクトリ]...
Riotコンポーネントファイルの拡張子を指定します。
このオプションを指定しない場合はriotが使われます。

例

> riot -e tag hello.tag
hello.tag -> c:\hello.js

-s, --sourcemap

Add inline or a file sourcemaps to the generated files - either: inline or file

riot -s "[inline|file]" [対象ファイル|対象ディレクトリ]...
"inline"を指定すると、生成したJavaScriptファイルの中にソースマップを追加します。
"file"を指定すると、[対象ファイル].js.mapを生成します。

例

> riot -s "inline" hello.riot
hello.riot -> c:\hello.js

> riot -s "file" hello.riot
hello.riot -> c:\hello.js
* hello.js.mapも生成される

-c, --config

Specify the path to a configuration file to compile your tags

riot -c [設定ファイル] [対象ファイル|対象ディレクトリ]...
タグをコンパイルするための設定ファイルを指定します。

hello.config.js

export default {
  sourcemap: 'file',
  output: 'dist'
}

例1

> riot -c hello.config.js hello.riot
hello.riot -> dist\hello.js

設定ファイルに記述したオプションは引数で指定しても無視されます。
一方設定ファイルに無いオプションは有効になります。

例2

> riot -c hello.config.js -o out -f umd hello.riot
hello.riot -> dist\hello.js
* -o outは無視されるが、umdフォーマットで出力される

-w, --watch

Watch for changes

riot -w [対象ファイル|対象ディレクトリ]...
変更を監視します。対象ファイルが変更されるたびにコンパイルが実施されます。

例

> riot -w hello.riot
Watching... hello.riot

-v, --version

Print the cli version

riot -v
Riot CLIのバージョンを出力します。

例

> riot -v
4.0.3

-h, --help

You're reading it

riot -h
Riot CLIのヘルプを出力します。