skillup

技術ブログ

JavaScript

yarnコマンド

投稿日:

JSやフロント側のライブラリを使うときはnpmを使ってたんですが、2〜3年前ぐらいからyarnというコマンドも使われているので、ちょっと調査を。

yarnとは?

基本的にはnpmの上位互換と考えて良さげ。特徴として、以下のような点が挙げられる

  • package.jsonをそのまま使える、但しyarnのみでインストールした場合は独自のyarn.lockなるファイルも存在する
  • yarnの方が高速かつ、セキュリティレベルが高い
  • npmで使えたコマンドは基本的にyarnでも使える(でなければ上位互換ではない・・・)
  • node:8以上のパッケージにはyarnコマンドがディフォルトで入ってるっぽい

よく使いそうなコマンド

基本的にnpmで使っていたものを使うはずなので、npmコマンドの整理のもので使ったものを。

他に以下のリンクを参考に。

npmとyarnのコマンド早見表

npmとyarnとpnpmの違い2021

yarn init

package.jsonをディフォルトで生成するコマンド。

yarn install

package.jsonに記録されているライブラリをインストール

yarn add パッケージ名

パッケージのインストール。以下はオプション

-g

通常はカレントディレクトリ以下に有効だが、-gのオプションはグローバル(環境全体になる)にインストールされる。

-D

開発時のみ必要な場合はこのオプションが必要になる。

yarn remove パッケージ名

アンインストール。

yarn list –depth==0

カレントディレクトリのプロジェクトにインストールされているライブラリの一覧。–depth==0をつけないと再帰的処理が走るのでつけたほうが無難。-gをつけるとグローバル環境。

yarn -s run パッケージ名

インストールされたライブラリを実行する際に使用される。npxと近い処理

yarn run スクリプト

npm run devと同じ要領で使える。

というか、yarn以外にpnpmなんていうコマンドも出てくるようで・・・フロントエンドは技術の変遷が激しい・・

 

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …

no image

モジュールバンドラrollupについて

モジュールバンドラというと一般的にはwebackが一般的ですが、rollupというモジュールバンドラを調査したところ、良さげな感じなので、ちょっとメモ。 サンプル https://github.com …

no image

JavaScriptでのDom操作に関して

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 Contents1 ES6のクラス化2 DOM要素取得のポイント2.1 class自体でのスコー …

アーカイブ