yarnの使い方について

yarnの使い方について調べたので纏めます。

yarnとは

JavaScriptのパッケージマネージャです。

JavaScriptのパッケージマネージャ

パッケージマネージャーが分からなかったので調べてみると、

パッケージマネージャとは、コンピュータに何のソフトウェアがインストールされたかを記録し、新しいソフトウェアのインストール・新しいバージョンへのソフトウェアの更新・以前インストールしたソフトウェアの削除を容易に行えるようにするプログラムです。名前が示すように、パッケージマネージャはパッケージを取り扱います。パッケージとは、ファイル群を一つにし、インストールや削除をまとめてできるようにしたものです。

https://www.debian.org/doc/manuals/aptitude/pr01s02.ja.html

要するに、使いたいソフトウェアをいい感じに整理してくれるやつですね。

使用するファイル・ディレクトリについて

使用するファイル・ディレクトリは以下の通り。

  • package.json
  • yarn.lock
  • node_modules

それぞれ解説します。

package.json

使用するソフトウェアのメタデータを保存するファイルです。

自分で使いたいソフトウェアを書き込んでもいいし、

yarn add jquery

とかやってもjQueryをインストール、package.json に自動で追記してくれます。

自分で書き込んだ場合は、package.jsonに記載した後に、

yarn

で、package.jsonに記載されたソフトウェアをインストールしてくれます。

yarn.lock

インストールされたパッケージの依存関係をロックしているファイルです。


これがあると、package.jsonにバージョンの範囲指定をしている場合でも、最新のデータを持ってくるのではなく、yarn.lockに記載されたバージョンをインストールしてくれます。

開発メンバーがバラバラのバージョンを使うことを防ぐ事が出来るのでチーム開発時には不可欠のファイルです。

補足:npmについて

yarnと同じパッケージマネージャにnpmというものがあります。
npmはyarn以前から使われているパッケージマネージャですが、yarnはこのnpmと互換性があります。

yarnもnpmもpackage.jsonで使用するソフトウェアを管理しているので、npmからyarnに乗り換えるのも容易です。

因みにnpmでは、yarn.lockではなくpackage-lock.jsonというファイルで依存関係を管理してくれます。

node_modules

yarn

した時にソフトウェアは、ルートディレクトリ直下のnode_modulesディレクトリにあくまで仮置場としてインストールされます。

このディレクトリは.gitignoreで Git リポジトリから除外するのが普通で、このディレクトリ内のファイルは編集しては行けません。

補足:マニフェストファイルについて(Railsの場合)

Railsでは、以下の2つのファイルをマニフェストファイルと呼びます。

app/assets/stylesheets/application.css
app/assets/javascripts/application.js

この2つのファイルは、Railsで作成するWebアプリ(のほぼすべてのページ)に読み込むCSSファイルとJSファイルを指定するために存在します。

node_modulesで管理されているCSS・JSファイルは読み込まないと使えないので、(当然)

// app/assets/javascripts/application.js に記載
//= require flatpickr/dist/flatpickr.min
//= require flatpickr/dist/l10n/ja
// app/assets/stylesheets/application.css に記載
*= require "flatpickr/dist/flatpickr.min"

こんな感じで読み込みたいファイルを確認して、書いてあげる必要があります。
※flatpickrってやつだと上記のような感じです。使用方法とかに書いてくれてるはず。

当然の知識なんだと思いますが、yarnを魔法だと思ってた自分は馬鹿みたいにここで詰まってました(泣)