yarnとnpmについてのナレッジ
CODE-EGGyarn
node.jsのパッケージマネージャー。
FaceBook製。
npmより後発。
npmと互換性がある。(package.jsonが使える)
初期化
yarn init
対話形式でpackage.jsonを作成する。プロジェクトがyarnで管理される。(package.jsonが作られる)
次のように入力すればすべてEnterされる。あとからpackage.jsonを編集すればよいので以下が楽。
yarn init -y
パッケージを追加
yarn add {パッケージ名}
dependenciesに追加される。
devDependenciesにパッケージを追加
yarn add --dev {パッケージ名}
yarn add -D {パッケージ名}
開発時にしか利用しないパッケージは-Dでインストールしておくとよい。
例えばeslintはコードをチェックするパッケージで、webに公開したら利用されることがないのでdevDependenciesに追加する。
グローバルにパッケージを追加する
yarn global add {パッケージ名}
ちなみに次のようにするとローカルとグローバル両方にインストールされるので注意。
yarn add global {パッケージ名}
yarn globalの確認方法
プロジェクト単位ではなくyarn globalにインストールされたパッケージはすべてのプロジェクトで利用できる。
確認は以下のコマンド。
yarn global list
yarn install
package.jsonのdependenciesとdevDependenciesに書かれているパッケージをインストールする。
単にyarn でもOK。
※npmにもinstallがあるが、addとinstallを合わせてinstallとなっているので注意。
yarn run
ローカルにあるパッケージのコマンドを実行するためのyarnのコマンド。
例えば、eslintを実行するためのコマンドとしてeslintというコマンドがあるが、このコマンドは使うとエラーになる。(ただしyarn global add をしていたらエラーにはならない。)
eslint index.ts
コマンドの実行の仕組みとしては次の通り。
- ターミナルにコマンドを入力。
- OSが環境変数に定義されているpathを確認する。
- なければグローバルインストールを確認する。
- なければエラーを出力する
グローバルインストールの場所
yarn global bin
yarnのグローバルにないのにグローバル実行できる場合は、npmでグローバルインストールされている可能性がある。
npm root -g
C:\Users\{ユーザ名}\AppData\Roaming\npm\node_modules
フォルダの中を見るとbinがあるのでこれを実行してくれる。
yarnのようなパッケージマネージャでパッケージをローカルにインストールして管理していく。
yarnが管理者なのでローカルのパッケージを動かすにはyarnを通して実行してもらう必要がある。
ただし、直接binまでのパスを指定して叩くことはできそう。例えば次ようにする。
./node_modules/eslint/bin/eslint.js {ファイル名}
binとは？
パッケージの実行ファイル(コマンド)をインストールするフォルダ。./node_modules/binにある。
yarn add でパッケージをインストールすると、yarn runで実行できるようにされた各パッケージの実行ファイルが作成される。
yarnのbinフォルダの場所の確認方法
yarn が管理しているbinフォルダの場所を表示する。
yarn bin
実行ファイルとは？
プログラムが書かれたファイル。コマンドを入力したときに初めに動くファイル？
(.exeのような拡張子であることが多い。)
yarnによってbinフォルダが作られ、binの中でインストールしたパッケージの実行ファイルを管理している。これはnpmの場合は、npmによってbinが作られてbinの中で実行ファイルが管理される。
このようにパッケージマネージャー毎にbinが作られるので複数のパッケージマネージャーを利用するのはバグの元なので禁止。
パッケージの追加
yarn add {パッケージ名}
dependenciesに追加される。
devDependenciesにパッケージ追加する
yarn add --dev {パッケージ名}
yarn add -D {パッケージ名}
これらは開発時にしか利用しないパッケージは-Dでインストールしておくとよい。
例えばeslintはコードの構文チェックに利用する。webに公開したらeslintは利用されることがないのでdevDependenciesに追加する。
yarn install
package.jsonのdependenciesとdevDependenciesに書かれているパッケージをインストールする。 単にyarn でもOK。
グローバルにパッケージを追加する
yarn global add {パッケージ名}
ちなみに次のようにするとローカルとグローバル両方にインストールされる。
yarn add global {パッケージ名}
なぜyarn add でローカルにmoduleをインストールするのか。
package.jsonに記録されるので、チーム間でバージョンをそろえるのが容易になるため。
バージョンが勝手に変わると面倒。
yarn globalの確認方法
プロジェクト単位ではなくyarn globalにインストールされたパッケージはすべてのプロジェクトで利用できる。
確認は以下のコマンド。
yarn global list
yarn run とは？
ローカルのパッケージのコマンドを実行するためのyarnのコマンド。(このような使い方をタスクランナーという)
基本的にyarnのようなパッケージマネージャでパッケージをローカルにインストールして管理していく。
yarnが管理者なのでローカルのパッケージを動かすにはyarnを通して実行してもらう必要がある。
ただし、直接binまでのパスを指定して叩くことはできそう。例えば次ようにする。
./node_modules/eslint/bin/eslint.js {ファイル名}
(グローバルインストールすればパスが通り、eslintだけで実行できるようになる)
binとは？
パッケージの実行ファイルをインストールするフォルダ。./node_modules/binにある。
yarn add でパッケージをインストールすると、yarn runで実行できるようにされた各パッケージの実行ファイルが作成される。
なぜコマンドをyarn runで実行する必要があるのか？
パッケージのコマンドは基本的にnode_modules/*/binの中に入っている。
例えばeslintコマンドを実行するには次のように入力する必要がある。(グローバルインストールするとyarnではなくコンピューターによってパッケージが管理される。つまりパスが通るので、グローバルインストールの場合は単に「eslint」と入力しても実行できる。)
./node_modules/eslint/bin/eslint.js {ファイル名}
これでは長くて面倒。
package.jsonのscriptにコマンドを書くことで
yarn run {任意のコマンド名}で簡単に実行できるようになる。
{
"scripts": {
"lint": "eslint --dir {対象のフォルダ}"
},
}
yarn run lint
※ここでeslintで良いのはなぜかというと、package.jsonにeslintと書くと、node_modulesからeslintを探して実行してくれるから。
yarn run
yarn runだけだと、現在yarn runで実行できるコマンドの一覧を表示してくれる。
yarn runの省略
scriptのコマンドを実行する場合は、runを省略できる。
yarn lint
参照リンク
CODE-EGGnpm
npx
ローカルにインストールされているパッケージのコマンドを実行するためのコマンド。
npxは./node_modules/.binからコマンドを探して実行する。もしなければ、ローカルにパッケージをインストールして実行する。実行した後は、アンインストールされるので環境が汚れることがないため良い。
CODE-EGG関連
実行コマンドのフルパス表示方法
$ which eslint
/c/Users/ユーザ名/AppData/Roaming/npm/eslint
参考記事