新しいパッケージマネージャーの vlt を使ってみる
vlt は npm と互換性のあるパッケージマネージャーです。`npm` と同じように、パッケージのインストールや script の実行ができます。また、npm registry 互換のサーバーレジストリである vsr も同時に提供されています。
vlt は npm と互換性のあるパッケージマネージャーです。npm と同じように、パッケージのインストールや script の実行ができます。また、npm registry 互換のサーバーレジストリである vsr も同時に提供されています。
vlt と vsr が開発されたモチベーションとして、npm の registry に問題があり、これを解決するためであると述べられています。詳細は以下のブログを確認してください。
この記事ではクライアント側の vlt について紹介します。vlt は npm vsr を使用せずに npm registry からパッケージをインストールできます。
vlt をインストールする
以下のコマンドを実行することで、vlt をインストールできます。現在 vlt は Node.js の v20 と v22 でサポートされています。
npm install -g vlt以下のコマンドで正常にインストールされたか確認してみましょう。
vlt --version
0.0.0-0.1730830331789vlt でパッケージをインストールする
vlt は npm と同じように、install コマンドを使ってパッケージをインストールできます。デフォルトでは public npm registry からパッケージをインストールするため、npm で公開されているパッケージをそのまま利用できます。
パッケージをインストールする前にプロジェクトルートに package.json ファイルが存在している必要があります。
echo "{}" > package.jsonpackage.json ファイルが作成されたら、以下のコマンドで lodash パッケージをインストールしてみましょう。
vlt install lodashインストールが完了すると、package.json ファイルの dependencies フィールドに lodash が追加され、vlk-lock.json ファイルが作成されます。
{
"dependencies": {
"lodash": "^4.17.21"
}
}--save-dev もしくは -D オプションを付けることで、devDependencies フィールドにパッケージを追加することもできます。
vlt install --save-dev @types/lodashvlt でスクリプトを実行する
それではインストールした lodash パッケージを使ったスクリプトを実行してみましょう。mains.js ファイルを作成し、以下のコードを記述します。
const { sum } = require("lodash");
const array = [1, 2, 3, 4, 5];
console.log(sum(array));続いて package.json ファイルに scripts フィールドを追加し、start スクリプトを定義します。
{
"scripts": {
"start": "node main.js"
}
}vlt run <script> コマンドを使って package.json ファイルに定義されたスクリプトを実行できます。
vlt run startスクリプトを実行すると、コンソールに以下のような出力が表示されるはずです。
15
{
command: 'node main.js',
args: [],
cwd: '/vlt-example',
stdout: null,
stderr: null,
status: 0,
signal: null,
pre: undefined
}
{
"command": "node main.js",
"args": [],
"cwd": "/vlt-example",
"stdout": null,
"stderr": null,
"status": 0,
"signal": null
}ローカルにインストールされていないパッケージを利用する
vlx コマンドを使うと、npx と同じようにローカルにインストールされていないパッケージを利用できます。
vlx serveパッケージの依存関係を表示する
vlt query コマンドを使用すると、様々な方式でパッケージの依存関係を表示できます。デフォルトでは human-readable な形式で表示されます。
vlt query
file·.
├─┬ [email protected]
│ └─┬ [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ └── [email protected]
│ ├── [email protected]サブコマンドを使用することで、特定のパッケージのみを表示することも可能です。例えば以下のコマンドでは、react パッケージの依存関係のみを表示します。
vlt query '#react'
file·.
└── [email protected]以下のコマンドは cookie という名前から始まるパッケージをクエリします。
vlt query '[name^="cookie"]'
file·.
└─┬ [email protected]
├── [email protected]
└── [email protected]build コマンドが依存するプロジェクトの依存関係をすべて表示することもできます。
vlt query ':project > *:attr(scripts, [build])'結果のフォーマットを変更する
--view オプションを使用することで、結果のフォーマットを変更できます。human、json、mermaid、gui のいずれかを指定でき、デフォルトは human です。
mermaid オプションで実行すると、以下のように Mermaid の形式で出力されます。
vlt query --view=mermaid
flowchart TD
file%C2%B7.("root:file·.")
file%C2%B7.("root:file·.") -->|"react#64;^18.3.1 (prod)"| %C2%B7%C2%B7react%4018.3.1("npm:react#64;18.3.1")
%C2%B7%C2%B7react%4018.3.1("npm:react#64;18.3.1")
%C2%B7%C2%B7react%4018.3.1("npm:react#64;18.3.1") -->|"loose-envify#64;^1.1.0 (prod)"| %C2%B7%C2%B7loose-envify%401.4.0("npm:loose-envify#64;1.4.0")この出力を Mermaid Live Editor に貼り付けることで、依存関係をグラフィカルに表示できます。
gui オプションを使用すると、http://localhost:7017 を起動して、ブラウザで結果を表示できます。
vlt query ':project > :is(*[name="express"])' --view=gui
vlt の config を設定する
vlt のコマンドを実行する際にはいくつかの設定を指定できます。例えば --no-color オプションを使うことで、カラー出力を無効にできます。
vlt run start --no-colorこのような設定はプロダクトのルートに vlt.json ファイルが存在する場合、その値を参照します。
vlt config set コマンドにより、vlt.json ファイルに設定を書き込むことができます。
vlt config set no-color=trueコマンドを実行すると、vlt.json ファイルが作成され、以下のような内容が書き込まれます。
{
"color": false
}vlt.json ファイルに設定を書き込むことで、vlt のコマンドを実行する際に設定を指定する必要がなくなります。
