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

プルダウン連動のJS+動的要素のイベント追記(ライブラリのイベント)

JSがらみでちょっとした小ネタを。 Contents1 プルダウン連動2 動的要素へのイベント追加(ライブラリのイベントなど) プルダウン連動 大カテゴリ→小カテゴリなどとあった場合に、新規だけではな …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

アーカイブ