特にnpmの概念と使い方について。
発端
前回、Web開発環境について調べてみた。
今回は少し具体的にいく。だが基礎知識がない。
WEB開発したい→環境構築すべき→npmなにそれ?
じつは環境構築するためには事前に勉強せねばならない……。
開発環境
- Raspberry Pi 3 Model B
最低限の環境構築
ツール | 概要 |
---|---|
Node.js | 9.4.0|サーバアプリ。Web開発環境のデファクトスタンダード? |
npm | 5.6.0|Node.jsのパッケージ管理ツール |
n | 2.1.7|Node.jsのバージョン管理 |
パッケージ管理
npm
を使ってパッケージを管理する。
パッケージ(node_modules)
パッケージとはソフトウェア部品のこと。Library(API)、Framework、SDKなど。Web開発の場合、前回述べたように、トランスパイラ、モジュールバンドラ、タスクランナなどもそのひとつ。
(パッケージ、モジュール、など名前が紛らわしい。明確な使い分けがあるのか不明)
依存関係
パッケージ間には依存関係がある。これらを自動的に解決する。(必要なパッケージを自動インストールする)
解決
npmでは使用パッケージを一括ダウンロードできる。対象プロジェクトのルートディレクトリで$ npm i
とする。
自作プロジェクトでインストール対象を指定したいときは、$ npm init
コマンドでpackage.json
ファイルを作成する必要がある。
npm init
プロジェクトディレクトリ
任意のパスにプロジェクトディレクトリを作成する。(今回はtaskrunner
とする)
$ cd /home/pi/root/env/node/taskrunner
- 以降、カレントディレクトリは常にこことする
- 任意名といったが、インストールパッケージ名と同じ
gulp
にするとgulp
インストール時にエラーになった
npm init
npmパッケージ管理用ファイルpackage.json
を作成する。
コマンド | 概要 |
---|---|
$ npm init |
質問に答える |
$ npm init --y |
質問をすべてYES で |
$ npm init
だと質問されるが、全部Enterキーで飛ばしてOK。
package.json
ファイルが作成される。
package.json
{ "name": "taskrunner", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
パッケージをインストールすると追記されていく。そのpackage.json
ファイルを配布すれば、配布先で$ npm i
コマンドを実行するだけでモジュールを全部インストールできる。
npm install
コマンド | 概要 |
---|---|
$ npm install |
パッケージをインストールする |
$ npm i |
省略形 |
(なお、今回は$ npm i -D gulp
のほうが良い。理由は後述)
パッケージは何でもいいが、ここではタスクランナgulp
にする。
$ npm i gulp
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js npm WARN deprecated natives@1.1.3: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x. npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN taskrunner@1.0.0 No description npm WARN taskrunner@1.0.0 No repository field. + gulp@3.9.1 added 255 packages in 26.344s
警告がたくさん出たが、とりあえず無視。gulp
の依存関係にあるほかのパッケージもコマンド一発で自動インストールしてくれる。
保存パス
/home/pi/root/env/node/taskrunner/
(プロジェクトのルート)package.json
node_modules/
(パッケージ群).bin/
(実行ファイル群)gulp
(実行ファイル)
package.json
gulp
をインストールしたのでdependencies
に追加されている。
{ "name": "taskrunner", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "gulp": "^3.9.1" } }
このファイルを配布し、カレントディレクトリをこのファイルがあるディレクトリにしてから、$ npm i
すれば、gulp
がインストールできる。
実行
gulp
のバージョン確認をするコマンドを叩いてみる。
$ /home/pi/root/env/node/taskrunner/node_modules/.bin/gulp -v [00:00:00] CLI version 3.9.1
$ $(npm bin)/gulp -v [00:00:00] CLI version 3.9.1 [00:00:00] Local version 3.9.1
(npx
というコマンドもあるらしいが動作未確認。やたら応答が遅いし、何かをインストールしようとしているように見えたので中断した)
npm runという方法もあるが、設定せねばならないので面倒。
npm run gulp
package.json
... "scripts": { "gulp": "gulp" }, ...
パス指定の方法を採用しつつ、環境変数PATHに設定することで入力を省略したい。
環境変数PATH
.bash_profile.sh
export PATH=${PATH}:/home/pi/root/env/node/taskrunner/node_modules/.bin
これでターミナルを起動したときに環境変数がセットされる。
確認
カレントディレクトリがどこであっても、gulp
コマンドが実行できる。
$ gulp -v [00:00:00] CLI version 3.9.1
dependencies
package.json
のキーのうち依存関係を定義するものは5種類ある。
種類 | コマンド | 対象 | 動作 |
---|---|---|---|
dependencies | $ npm i |
プロジェクト固有モジュール | プロジェクトルートで$ npm i とするとインストールする |
devdependencies | $ npm i -D , $ npm i --save-dev |
テストツール、タスクランナ、ビルダ/バンドラ、トランスパイラなど | インストールしない |
peerDependencies | プラグイン | バージョン範囲外ならエラー | |
bundledDependencies | 単一ファイルにまとめる(tarball) | ||
optionaldependencies | 欲しいが無くてももエラーにはならない |
目的
npmを作って公開するときは意識したほうがいい。必要なモジュールのインストールを自動化するために必要。(実行するには、package.json
があるプロジェクトのルートディレクトリで$ npm i
コマンドを叩く)
仕様
今回のgulp
のように、自分の環境で実行するだけなら一切意識する必要はない。
ただ、URLを見ると、dependencies
にトランスパイラなどは配置するなと書いてある。また、テストツールなどインストールする必要のないものはdevdependencies
に設定しろとある。このことから、バンドラやタスクランナなどのツール系はdevdependencies
にしたほうが良いのだろう。
gulp
はタスクランナなので、devdependencies
にするのが良いか。$ npm i -D
とするとそのようにインストールできる。