まず、package.json
の仕組みを理解することをおすすめします。
npm install
npmパッケージをインストールする場合はnpm install ...
で終わりです。
package.jsonに記述されているものをインストールしますし、lockファイルに無いものがpackage.jsonにあれば、それもインストールされ、lockファイルは更新されます。
npm init
npm init
はパッケージ管理ライブラリnpm
が提供している初期化の方法です。
create-[package name]
などのパッケージ名(package.jsonのname)がnpmレジストリ内にあれば、それをダウンロードし、package.jsonのbin
フィールドにあるCLIを実行します。
例えば、質問中にあるgatsby
だと、
npm init gatsby
を実行
create-gatsby
がヒット(https://www.npmjs.com/package/create-gatsby
)
- package.jsonの"bin"フィールドのスクリプトが実行(
https://github.com/gatsbyjs/gatsby/blob/master/packages/create-gatsby/package.json#L5
)
といった形です。gatsby-cli
はこのcreate-gatsby
に依存しています(alpha版っぽいですが)。したがって、どちらも同じふるまいをしていることになります。
npm init
の手順のほうが、gatsby-cliと比較してそれ自体のインストール手順が1つ省けるといった具合でしょう。
これはnpm
の処理の話なので、yarn
やpnpm
など他のパッケージマネージャーは話が違うかもしれません。
接尾後のcliあり/なしとは
これはただのパッケージ名です。これ自体に決まったルールではないため、何かに則った仕組みかどうかは私の知る限りではありません。
ターミナルで使うもののほうが多い気がしますというかターミナルで使わないとはどういう場面なのでしょうか?
結構あります。postcss自体はpostcssというライブラリの主要な処理を持っています。これを利用して、webpackのビルドパイプライン用にpostcss-loaderがあったり、未使用のcssを削除するためのpurgecss(tailwindcssが依存している)などがあります。
他にも静的解析ツールや、validationやplayground、エディターのType Hintとか色々な場面で利用できます。ターミナルはあくまでのその一例に過ぎません。
動画中の間違い
一つ動画で(動きはするけども)間違いがあります。postcssをアンインストールする場面です。
postcssをアンインストールしてpostcss-cliをインストールしていますが、postcss-cliの依存関係を見てみると、postcss
自体はdevDependenciesに記載があるため、インストールされません。peerDependenciesに書いていますがこれは8.0.0以降のバージョンをインストールすることをpostcss-cliがユーザーに対して期待しているだけであってpostcssの実体は一緒についてきません。
postcss自体はtailwindcssが直接依存しているpurgecssがdependenciesのフィールドに持っているためついてきているためであり、postcssをアンインストールして、postcss-cliをインストールすることは本質的な解決になっていません。
整理のためのおすすめ
問題を整理するためには、package.json
の仕様とパッケージマネージャ(npm
)の振る舞いを分けて考えることです。
package.json
の仕様は固定であるためまずはそこから攻略することをおすすめします。npm
の引数を変えて実行される処理はnpmの実装の挙動でしかありません。パッケージマネージャを別のものに変えたらとたんに使えなくなるものがありますので、本質的な部分を理解しておくことをおすすめします。