Rack

リリースノート | 開発者用ドキュメント

WEB制作に必要なテンプレートファイルや制作環境を、自分のプロジェクトへ簡単に構築。
必要なライブラリも自動でインストール。

現在対応しているテンプレートや制作環境は以下の通り。

• WEBサイト開発環境
  • Vite（提供している内容はこちらを参照）
• 制作環境設定ファイルテンプレート（提供テンプレートはこちらを参照）
• Pug（HTMLテンプレートエンジン）
• Stylus（CSSプリプロセッサ）
• TypeScript（独自ライブラリ）

テンプレート内容はtemplatesディレクトリから確認可能。

利用要件

Node.js v22.0.0 以上

Install

npm

npm i -g @iki-inc/rack

pnpm

pnpm add -g @iki-inc/rack

yarn

yarn global add @iki-inc/rack

Usage

利用方法は構築したいプロジェクトのディレクトリでrackコマンドを実行すると対話形式でテンプレートや環境を選択できる。

WEBサイト制作環境を構築する場合はプロジェクトルートで必ず実行が必要。
TypeScriptなどは直接コピーしたいディレクトリから実行することも可能で、プロジェクトルートで実行してもコピー先を指定することもできる。
※一部指定できないものもあり

rack

オプション

オプションを指定することで、必要なテンプレートや制作環境構築を直接実行できる。

ViteベースのWEBサイト開発環境を構築

rack --vite

Vite開発環境の提供している機能はこちらを参照。

制作環境設定ファイルテンプレートを構築

rack --env

提供しているテンプレートはこちらを参照。

Pugのアセット一式

rack --pug

Stylusのアセット一式

rack --stylus

TypeScriptのライブラリ選択

rack --ts

Rackのバージョン確認

rack --version

もしくは

rack -V

ヘルプ表示

rack --help

注意

npmサプライチェーン攻撃対策

ライブラリを自動でインストールする場合にはnpmサプライチェーン攻撃に対して少しでも対処するためにignore-scripts=trueを付与して実行しています。
そのため、インストールしたライブラリにpreスクリプトやpostスクリプトがあってもそれらは実行されません。
インストールされたライブラリの安全性を確認してnpm rebuild <パッケージ>を手動実行してください。
※.npmrcにignore-scripts=trueを記述している場合はnpm rebuild <パッケージ> --ignore-scripts=falseで一時的に解除可能です。

プロジェクトにインストールしているライブラリにpreスクリプトやpostスクリプトを調べるコマンドは下記を参考にしてください。

Tips

プロジェクトのpackage.jsonに下記のnpmスクリプトを追加しておくと便利です。

{
  "scripts": {
    "package:use-pre-or-post-scripts": "grep -r '\"install\"\\|\"preinstall\"\\|\"postinstall\"' node_modules/*/package.json | grep -v node_modules/node_modules",
    "package:rebuild": "npm_config_ignore_scripts=false npm rebuild ${npm_config_pkg:-} --loglevel=verbose",
    "rebuild-packages": "npm run package:rebuild --pkg=\"<パッケージ名> <パッケージ名>\""
  }
}

package:use-pre-or-post-scripts
プロジェクトにインストールしているライブラリにpreスクリプトやpostスクリプトが存在しているかチェックする。

package:rebuild
リビルドのショートカット。
npm run package:rebuild --pkg="<パッケージ> <パッケージ>"で実行。

rebuild-packages
インストールしているライブラリのバージョンが安全である場合はリビルドするパッケージを宣言しておくことで必要なライブラリを一括でリビルドできます。

grep -r '"install"\|"preinstall"\|"postinstall"' node_modules/*/package.json | grep -v node_modules/node_modules

コントリビューター向け

開発者は開発ドキュメントを参照。