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

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

新技術のメリットを理解したい場合(jQueryと比べた場合のVueのメリットなど)

Vueを昨年度ぐらいからコツコツと勉強しています。 正直、その理由の半分ぐらいは「流行っているから」というのが大きいですね(汗) エンジニアとしてはやはり新しい技術自体を追い求めること自体に「快感」の …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

cssフレームワークをnode_modulesから読み込む+cssの拡張

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …

アーカイブ