Help us understand the problem. What is going on with this article?

yarnの使いかた

yarnとは

yarnはパッケージマネージャー。https://yarnpkg.com/en/
nodeをインストールすると自動でインストールされるnpmと役割は同様。
ただ、並行処理でのインストールによってnpmよりも高速にパッケージをインストールできる。

使い方

新しいプロジェクトを始める際に

yarn init

プロジェクトに対してパッケージを追加

プロジェクトに対してのパッケージの追加方法

yarn add パッケージ名
yarn add パッケージ名@バージョン #バージョンを指定してパッケージのインストール
yarn add パッケージ名@タグ # これはいったい、、、

グローバルに対してパッケージを追加

プロジェクトではなく、グローバルにパッケージの追加方法
◯◯-cliのようなパッケージをよくグローバルに追加するような気がします。

yarn global add パッケージ名

パッケージのアップグレード(バージョンアップ)

yarn upgrade パッケージ名
yarn upgrade パッケージ名@バージョン
yarn upgrade パッケージ@tag

パッケージの削除

yarn remove パッケージ名

全てのパッケージと依存関係をインストール

yarn

yarnのワークフロー

ドキュメントの通り

  1. Creating a new project
  2. Adding/updating/removing dependencies
  3. Installing/reinstalling your dependencies
  4. Working with version control (i.e. git)
  5. Continuous Integration

1. Creating a new project

yarnを追加したいディレクトリで以下を実行

yarn init

実行すると、対話形式でyarnの追加が始まる
何も入力しなくても良いし、しても良い。

name (your-project):
version (1.0.0):
description:
entry point (index.js):
git repository:
author:
license (MIT):

質問に答え終わったらpackage.jsonが作成されている。
質問に答えた内容で最低限のpackage.jsonが作られている。
自分だとこんな感じになってた。

package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "author": "kyohei",
  "license": "MIT"
}

package.jsonにはアプリケーションの情報を保存していく。
保存する情報で最も重要なのは、アプリケーションにインストーする必要があるパッケージ(と依存関係)。

2. Adding/updating/removing dependencies

別のパッケージを使用する場合は、そのパッケージを依存関係として追加する必要がある。
先に紹介したパッケージを追加するコマンドを実行する。

yarn add パッケージ

実行するとpackage.jsonに依存関係を追加する。
同時に依存を反映させたyarn.lockも更新される。

yarn.lock

yarn.lockは、誰でも同じバージョンの依存をインストールできるように各依存のバージョンを管理するファイル。
add, upgrade, removeなどのyarnコマンドを実行すると自動でyarn.lockも更新される。

3. Installing/reinstalling your dependencies

yarn installは、アプリケーションにすべての依存をインストールするために行う。
pacakge.jsonを元に依存のインストールを行い、yarn.lockでバージョンを管理する。

yarn installのオプション

オプションもいくつかあるよ
実際に使うときに詳しく調べる
https://yarnpkg.com/en/docs/installing-dependencies

4. Working with version control (i.e. git)

パッケージを管理するには、以下のファイルをソース管理(git)に置く必要がある。

  • package.json
    • 現在の全ての依存の管理
  • yarn.lock
    • 依存のバージョン管理
  • ソースコード

5. Continuous Integration

yarnはビルドを早めるためにyarnのキャッシュディレクトリは全体に保存できる。

便利なyarn run

package.jsonのscriptsに定義したことを実行してくれる。

package.json
{
  "name": "my-package",
  "scripts": {
    "build": "babel src -d lib",
    "test": "jest"
  }
}

このようにすると、ターミナルで以下のようにして実行できる。

yarn run test

以下と同義

yarn run jest

引数も渡せる。

yarn run test -- -o --watch

node_modules/.bin/の中にローカルインストールされた実行可能ファイルもscriptsに書ける。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした