1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. パッケージマネージャー
  6. »
  7. Yarn の使い方。インストールの方法から使い方まで解説します。

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。

関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。

Yarn とは

Yarn
Yarn

Yarn は JavaScript のパッケージマネージャです。 Facebook が、Exponent、Google、Tilde とコラボして公開しています。

Yarn をインストールする

では、早速インストールしていきましょう。
今回は Homebrew を使った方法を紹介します。
Homebrew を使ったことがない場合は Homebrewを使いこなせ!Macへのインストールや使い方。 をご覧ください。

インストールは下のコマンドをターミナルに入力します。

$ brew install yarn

Yarn のバージョンを確認する

Yarn のバージョンは、以下のコマンドで確認することができます。

$ yarn --version
1.2.1

もしくは

$ yarn -v
1.2.1

package.json ファイルの作成(新しいプロジェクト開始)

新しいプロジェクトを開始する場合は、 package.json ファイルを作成します。
package.json ファイルは、以下のコマンドで作成できます。

$ yarn init

必要な情報を入力します。(何も入力せずに、 Enter を押してしまっても構いません)

パッケージをインストールする

では、パッケージをインストールする方法を紹介します。

$ yarn add パッケージ名

例えば Bootstrap をインストールしたい場合は

$ yarn add bootstrap

となります。

パッケージのバージョンを指定する

パッケージのバージョンを指定したい場合は @ の後にバージョンを入力します。

$ yarn add パッケージ名@バージョン

例えば Bootstrap の 4.0.0-beta をインストールしたい場合は

$ yarn add [email protected]

となります。

依存関係

パッケージのインストールには、依存関係を示すオプションが使えます。

$ yarn add パッケージ名
$ yarn add パッケージ名 --dev
$ yarn add パッケージ名 --peer
$ yarn add パッケージ名 --optional

上記コマンドで、 package.json ファイルのそれぞれ
dependencies
devDependencies
peerDependencies
optionalDependencies
に登録されます。

package.json からインストールする

今までと環境が変わったなどの場合には、 package.json からパッケージをインストールすることができます。
cd コマンドで package.json と同じ階層へ移動し、以下のコマンドを実行します。

$ yarn install

もしくは

$ yarn

パッケージのアップグレード

upgradeコマンドで、パッケージをアップグレードすることができます。

$ yarn upgrade パッケージ名

また、バージョンを指定することもできます。

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

例えば Bootstrap の 4.0.0-beta にアップグレードしたい場合は

$ yarn upgrade [email protected]

です。

パッケージをアンインストールする

以下のコマンドでパッケージをアンインストールできます。

$ yarn remove パッケージ名

例えば Bootstrap をアンインストールしたい場合

$ yarn remove bootstrap

となります。

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

【Bootstrap 4】記事一覧ページなどで使える「カード」の使い方

Bootstrap4の使い方、第7回目です。 トップページなどを見ると、記事の一部が抜粋された記事一覧が表示されているサイトをよく見かけます。 今回はそんな記事一覧ページを作るのに便利な「カー

WordPress | ツイート数やシェア数付きのSNSシェアボタンを自作しよう!

最近SNSシェアボタンを作り直した@It_is_Rです。 せっかく作ったんだから、シェアするのだよ、みんな。 そこで今回は、Twitter や Facebook、GooglePlus、はてな

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

コメントをどうぞ!

メールアドレスが公開されることはありません。