Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ponsuke0531

yarnをインストールする

Last updated at Posted at 2021-01-12

何？yarnって？

Yarnとは、2016年にリリースされたnpmと互換性のある新しいパッケージマネージャーです。
JavaScriptのパッケージマネージャーnpmとYarnについて解説します！ | 侍エンジニア塾ブログ（Samurai Blog） - プログラミング入門者向けサイト

Windowsにインストールする

  • 環境
    • Windows10 Pro バージョン1909
    • node v10.23.1
    • npm 6.14.10
インストールする
$ npm install -g yarn

> yarn@1.22.10 preinstall C:\Users\ponsuke\AppData\Roaming\npm\node_modules\yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

C:\Users\ponsuke\AppData\Roaming\npm\yarnpkg -> C:\Users\ponsuke\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\ponsuke\AppData\Roaming\npm\yarn -> C:\Users\ponsuke\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.22.10
added 1 package in 0.607s

$ yarn -v
1.22.10

使ってみる

package.jsonを作成する

初めて使うときはインストールするライブラリを記録するpackage.jsonを作成します。

参考 : yarn init | Yarn

# 作業用のディレクトリを作成します
$ mkdir google-analytics-api

# 作ったディレクトリに移動します
$ cd google-analytics-api/

# yarnの初期化、質問は特に指定せず(指定してもOK)Enterで進めます
$ yarn init
yarn init v1.22.10
question name (google-analytics-api):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 93.28s.

# package.jsonができました
$ ls
package.json

# package.jsonの中身はこんな感じ
$ cat package.json 
{
  "name": "google-analytics-api", # << 作業ディレクトリ名が使われる
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

# 1つライブラリをインストールしてみます
$ yarn add googleapis
yarn add v1.22.10
...
Done in 7.96s.

# node_modulesディレクトリが作られてライブラリがインストールされました
$ ls
node_modules  package.json  yarn.lock

# package.jsonはこんな感じになりました
$ cat package.json 
{
  "name": "google-analytics-api",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "googleapis": "^68.0.0"
  }
}

package.jsonの内容をインストールする

Gitからクローンしたプロジェクトのpackage.jsonの内容をインストールします。
package-lock.jsonについて警告が出ているけれど取り敢えず見なかったことにする

参考 : package-lock.jsonがある状態でyarn installするとServerlessのデプロイで痛い目にあう | cloudpack.media

# package.jsonのあるディレクトリへ移動して
$ cd /path/to/package/json/
$ ls -la | grep package
-rw-r--r-- 1 ponsuke 1049089   2210  1月 12 14:49 package.json
-rw-r--r-- 1 ponsuke 1049089 420922  1月 12 14:49 package-lock.json

# インストールする
$ yarn install
yarn install v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
warning url-loader@1.1.2: Invalid bin field for "url-loader".
info fsevents@2.1.0: The platform "win32" is incompatible with this module.
info "fsevents@2.1.0" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@2.0.7: The platform "win32" is incompatible with this module.
info "fsevents@2.0.7" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > vuetify@2.0.7" has unmet peer dependency "vue@^2.6.4".
warning "@nuxtjs/vuetify > sass-loader@7.3.1" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
warning "@nuxtjs/vuetify > vuetify-loader@1.3.0" has unmet peer dependency "vue-template-compiler@^2.5.0".
warning "@nuxtjs/vuetify > vuetify-loader@1.3.0" has unmet peer dependency "webpack@^4.0.0".
warning " > vuex-persistedstate@2.5.4" has unmet peer dependency "vue@^2.0.0".
warning " > vuex-persistedstate@2.5.4" has unmet peer dependency "vuex@^2.0.0 || ^3.0.0".
[4/4] Building fresh packages...
Done in 82.97s.

新しいパッケージを追加する

yarn add [package-name]を実行することで新しいパッケージがインストールされて、package.jsonとyarn.lockも併せて更新されます。
package.jsonに直書きしてyarn installしようとして他の人に止められました。

  1. yarn add package-name installs the “latest” version of the package.
  2. yarn add package-name@1.2.3 installs a specific version of a package from the registry.
  3. yarn add package-name@tag installs a specific “tag” (e.g. beta, next, or latest).

yarn add | Yarn

例
# @があるパッケージで@を書き忘れるとエラーになります
$ yarn add @nuxtjs/google-analytics
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
...

パッケージのバージョンを変更する

yarn upgrade [package@version]で指定したバージョンにアップグレードされて、package.jsonとyarn.lockも併せて更新されます。

Examples:
yarn upgrade
yarn upgrade left-pad
yarn upgrade left-pad@^1.0.0
yarn upgrade left-pad grunt
yarn upgrade @angular
yarn upgrade | Yarn

例
$ yarn upgrade nuxt@^2.9.0
yarn upgrade v1.22.10
#...省略...
└─ yocto-queue@0.1.0
Done in 21.98s.

困った

error An unexpected error occurred: "EPERM: operation not permitted, unlink

# 事象
$ yarn upgrade nuxt@^2.9.0
yarn upgrade v1.22.10
...省略...
error An unexpected error occurred: "EPERM: operation not permitted, unlink 'C:\\path\\to\\node_modules\\vue-meta\\lib\\vue-meta.js'".
info If you think this is a bug, please open a bug report with the information provided in "C:\\path\\to\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/upgrade for documentation about this command.

# 対応
$ npm cache clear
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead. On 
the other hand, if you're debugging an issue with the installer, you can use `npm install --cache /tmp/empty-cache` to use a temporary cache instead of nuking the actual one.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ponsuke\AppData\Roaming\npm-cache\_logs\2021-03-23T06_33_32_391Z-debug.log

# できた
$ yarn upgrade nuxt@^2.9.0
...省略...
└─ yocto-queue@0.1.0
Done in 21.98s.
3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?