npmに関する世界観です。Node.jsも参照のこと。
JavaScript フレームワーク入門を参考にしています。
以下はJavaScript フレームワーク入門を参考に執筆しました。
最近ではJavaScriptにおいてもパッケージマネージャを利用する機会が多い。依存関係を含めて、JavaScript関係のソフトウェアを簡単に導入・更新・管理できる。代表的なのはnpm。
| パッケージマネージャ | 説明 |
|---|---|
| npm | 元はサーバーサイドのJavaScript環境Node.jsのためのパッケージマネージャで、 最も一般的。 |
| Bower | パッケージマネージャの1つ。 npmがサーバーサイドのことも考慮しているのに比べ、クライアントサイドに特化している。 |
| webpack | モジュールバンドラーと呼ばれるソフトウェア。 読み込むファイルを1つにまとめることで、読み込みにかかる待ち時間の増加を防ぐ。 |
以下はJavaScript フレームワーク入門を参考に執筆しました。
まず、npmを導入するためにNode.jsをインストールする。
基本的に、
npm install packagename
でパッケージのローカルインストール（クライアントサイドで利用する時に使う）ができる。また、
npm install -g packagename
でグローバルインストール（Node.js全体から利用できる。サーバーサイドで利用する時に使う）ができる。また、
npm update -g
で全パッケージの更新ができる。
ローカルインストールをすると、プロジェクトの中の「node_modules」ディレクトリの中にJavaScriptファイルがインストールされるので、この中の必要なスクリプトファイルを<script>タグで読み込む。
また、npmでは、このようなコマンド一発のインストールではなく、特定のプロジェクトのためのパッケージの情報ファイルであるpackage.jsonに記述してパッケージをインストールすることもできる。この場合、JSON形式でパッケージの情報を記述する。
以下はフロントエンド開発の３ステップ（npmことはじめ） - Qiitaを参考に執筆しました。
npmには、npm init、npm install、npm runの3つの基本コマンドがある。
まず、npm initは、「このディレクトリをnpmで管理する」ということをディレクトリに対して設定するコマンド。実行するとpackage.jsonが置かれる。
次に、npm installは、パッケージをインストールするコマンド。パッケージはnode_modules内に保管される。--saveオプションをつけると、package.jsonに導入したパッケージを記録できる。
そして、npm runは、package.json内に記述されたタスク（基本的にビルドなどを行うために自分で記述する）を実行するコマンド。
また、browserifyという便利なツールがあり、これはnode_modules内のパッケージをJavaScriptから読み込むことのできるツールである。
npmでは、ローカルインストールした場合node_modules/.bin/に、グローバルインストールした場合/usr/local/bin/にCLIコマンドがインストールされる。
だが、たとえばローカルインストールした場合、node_modules/.bin/にあるCLIコマンドを実行するために、相対パス指定が必要となる。
普通このような場合は、package.jsonの中のscriptsフィールドに、コマンドを定義してnpm runによって実行する。
だが、わざわざこのような記述をしなければならないのは面倒だし、scriptsフィールドにたくさんのコマンドのみの定義が増え続けてしまう。
npxは、このような場合、コマンドを勝手に探してきて実行できるコマンド。ローカルインストールしたパッケージの中に含まれるCLIコマンドの実行がとても楽になる。
以下のページを参考に執筆しました。
YarnはFacebookが開発したJavaScriptのパッケージ管理システム。npmと互換性がある。
pnpmはJavaScriptのパッケージ管理システム。npmやyarnと同様のツールだが速度が速い。
2023.11.30
esbuildはJavaScriptのビルドツール。WebpackやBrowserifyと同様のツールだが、ビルド速度が高速。
2023.11.30