1

【Tailwind CSS #3】4つのインストール方法の紹介。オススメはPostCSSのプラグインとして使う方法 (YouTube)

上記の動画を見ていると、はじめ postcss を入れていたのですが、実行してみるとエラーになり、postcss-cliを入れ直していました。(入れ直しているのは13分50秒あたりから)

https://www.gatsbyjs.com/docs/tutorial/part-1/
にも

$ npm install -g gatsby-cli

とありますが、一方で、
https://www.gatsbyjs.com/get-started/
には

$ npm init gatsby

(gatsbyの場合は npm installnpm initの違いもあるのでそもそも違うもの? ちょとインストール方法にバリエーションがありすぎて混乱しています)

とあり、やはりclicliなしがあります。

command line interface (CLI)とのことですが、ターミナルで使うもののほうが多い気がしますというかターミナルで使わないとはどういう場面なのでしょうか?
なにか慣習があるのでしょうか?

下記は画像になってしまいますし、本質問には蛇足かもしれないですが、現状私が理解しようとまとめかけている資料を念の為にのせます。

画像の説明をここに入力

1 件の回答 1

2

まず、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だと、

  1. npm init gatsbyを実行
  2. create-gatsbyがヒット(https://www.npmjs.com/package/create-gatsby
  3. 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の処理の話なので、yarnpnpmなど他のパッケージマネージャーは話が違うかもしれません。

接尾後の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が直接依存しているpurgecssdependenciesのフィールドに持っているためついてきているためであり、postcssをアンインストールして、postcss-cliをインストールすることは本質的な解決になっていません。

整理のためのおすすめ

問題を整理するためには、package.jsonの仕様とパッケージマネージャ(npm)の振る舞いを分けて考えることです。
package.jsonの仕様は固定であるためまずはそこから攻略することをおすすめします。npmの引数を変えて実行される処理はnpmの実装の挙動でしかありません。パッケージマネージャを別のものに変えたらとたんに使えなくなるものがありますので、本質的な部分を理解しておくことをおすすめします。

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。