ロゴテキスト ロゴ

    nodeのパッケージマネージャーの救世主!ni

    nodeのパッケージマネージャーの救世主!ni

    昨今のフロント開発に携わっている人はぜひ導入してほしい!

    niというコマンドのご紹介です。




    nodeのパッケージマネージャーは

    • npm
    • yarn
    • pnpm
    • bun

    と沢山あります。


    そしてプロジェクトによって採用しているパッケージマネージャーは様々です。




    ややこしいことにそれぞれで同じ意味のコマンドが微妙に異なる実行名になっています


    例えば、

    パッケージを追加する際

    npm i -D @types/node
    yarn add -D @types/node
    pnpm add -D @types/node
    bun add -d @types/node

    内部パッケージを実行する際

    npx vitest
    yarn run vitest(1系)
    yarn dlx vitest(2系)
    pnpm dlx vitest
    bunx vitest

    と微妙に違いがあります。



    「このプロジェクトでは yarn だから yarn add して、こっちのプロジェクトはnpmだから、えーと。。。🫠」

    といった経験をされた事がある人も多いのではないでしょうか?



    niを使うとこのように迷うことなく、niがプロジェクトで使っているパッケージマネージャーを自動判別してそれに応じたコマンドを実行してくれます!

    検証した環境

    1 ni 0.20.0

    インストール

    インストールします

    npm i -g @antfu/ni

    使えることを確認

    $ ni -v
    @antfu/ni  v0.21.12


    niは nrnlxなど複数のコマンド集になっているため

    その他のコマンドも使えるようなっています

    $ nr -v
    @antfu/ni  v0.21.12
     
    $ nlx -v
    @antfu/ni  v0.21.12

    使用可能なコマンドは公式GitHubを参考下さい

    💡 Use the right package manager
    5.7k
    186
    TypeScript

    コマンドの使い方

    使い方は至ってシンプル!



    例えば、プロジェクトをcloneして最初に実行するような npm iyarn installni と打てばいいだけ。


    後はniがプロジェクトが利用しているパッケージマネージャーを自動判別してそれに応じたコマンドで実行してくれます

    # npmを使用しているプロジェクトの場合
    $ ni
    up to date, audited 1384 packages in 5s
    ・・
     
    # yarnを使用しているプロジェクトの場合
    $ ni
    yarn install v1.22.21
    [1/4] 🔍  Resolving packages...
    ・・・
     
    # pnpmを使用しているプロジェクトの場合
    $ ni
    Lockfile is up to date, resolution step is skipped
    ・・・


    公式を参考に利用出来る主なコマンドを書いていきます

    ni - install

    ni
     
    # npm install
    # yarn install
    # pnpm install
    # bun install
    ni vite
     
    # npm i vite
    # yarn add vite
    # pnpm add vite
    # bun add vite
    ni @types/node -D
     
    # npm i @types/node -D
    # yarn add @types/node -D
    # pnpm add -D @types/node
    # bun add -d @types/node

    nr - run

    これがとっても便利!

    npm-scriptsをインクリメンタルサーチして実行出来ます!


    nr
     
    # interactively select the script to run
    # supports https://www.npmjs.com/package/npm-scripts-info convention
    nr dev --port=3000
     
    # npm run dev -- --port=3000
    # yarn run dev --port=3000
    # pnpm run dev --port=3000
    # bun run dev --port=3000

    nlx - download & execute

    nlx vitest
     
    # npx vitest
    # yarn dlx vitest
    # pnpm dlx vitest
    # bunx vitest

    nu - upgrade

    nu
     
    # npm upgrade
    # yarn upgrade (Yarn 1)
    # yarn up (Yarn Berry)
    # pnpm update
    # bun update

    nun - uninstall

    nun webpack
     
    # npm uninstall webpack
    # yarn remove webpack
    # pnpm remove webpack
    # bun remove webpack
    nun -g silent
     
    # npm uninstall -g silent
    # yarn global remove silent
    # pnpm remove -g silent
    # bun remove -g silent

    niコマンドの使い方に迷った場合

    ヘルプを見ると思い出せるようになっています


    とりあえず使い方に迷ったら -h を実行すればOKです!

    $ ni -h
    @antfu/ni use the right package manager v0.21.12
     
    ni    -  install
    nr    -  run
    nlx   -  execute
    nu    -  upgrade
    nun   -  uninstall
    nci   -  clean install
    na    -  agent alias
    ni -v -  show used agent

    ni -h だけでなく nr -h など、全て共通で同じ内容が表示されます。

    どれか1つさえ覚えておいて -h をつければ思い出せる仕組みですね✨






    雑談

    今回もChatGPT先生にアイキャッチを作ってもらいました。



    1番最初に

    「パッケージマネージャーの救世主、ni というイメージの画像を作成して下さい」

    とお願いすると、↓のような画像を作ってくれました

    chatGPTが作ってくれたアイキャッチのボツ画像

    ni が mi になっているのはさておき、ヒーロー感あっていいですよね〜🦸‍♂️

    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。