パッケー管理ツールnpmについて

npmとはNode.jsのパッケージを管理するツール
Node.jsはJavaScriptでできたWeb Serverであり、開発に便利なツールをnpmを使ってインストールして使う

npm利用環境

macではnpmをインストールする前にhomebrewというmacOS用のパッケージマネージャーのインストールが必要

npmとNode.jsのインストール

homebrewインストール後に行う
Node.jsをインストールするだけで自動でnpmもインストールされる

# カレントディレクトリはどこでも良い
$ brew install node.js

# 確認
$ npm -v
$ npm -version

npmを使用するプロジェクト開始

package.jsonの作成

npmではまずはじめにpackage.jsonを作成する必要がある
プロジェクトディレクトリに移動し、初期化作業としてpackage.jsonを作成する
package.jsonファイルが既に存在している場合（他の人からもらったりした場合)は##パッケージインストールから

# package.jsonの生成
# いくつか質問されるが全部ENTER
$ npm init

# 次の書き方でENTER連打を省略できる
$ npm init -y
$ npm init -yes

パッケージインストール

$ npm i
$ npm install

# package.jsonファイル作成しておらず、ファイルへの記述とともにインストール
$ npm i -D パッケージ名
# version指定する場合
$ npm i -D パッケージ名@0.3.17

install時のオプション項目

オプション	省略	概要
--save	-S	package.jsonのDependenciesへの追記とともにインストール ユーザーがアクセスするようなシステムに必要なもの
--save-dev	-D	package.jsonのdevDependenciesへの追記とともにインストール 開発の中で必要なもの
--global	-g	global領域へのインストール

• global領域へのインストールでのインストール先
  • mac: /user/local/lib/node_modules
  • win: C:\Users\%USERNAME%\AppData\Roaming\npm\node_modules
• global領域へインストールする場合はパスを通しておく
  • パスの通し方
  • export PATH=$PATH:./node_modules/.bin

パッケージアンインストール

# パッケージのみアンインストール
$ npm uninstall パッケージ名
$ npm un パッケージ名
$ npm unlink パッケージ名
$ npm remove パッケージ名
$ npm rm パッケージ名
$ npm r パッケージ名

# package.jsonの記述とともにパッケージアンインストール
$ npm uninstall -S パッケージ名
$ npm uninstall -D パッケージ名

# globalインストールしたパッケージをアンインストール
$ npm uninstall -g パッケージ名

よく使うパッケージリスト

	パッケージ名	オプション	概要
	browserify	D	モジュール間の依存関係の解決し読み込み順序を気にせず良くなる ビルド(分割された複数のjsファイルを一つのファイルに) requireを使って別のjsを読み込めるようにする scriptタグ減少でサーバーへの通信が減り、高速化
	jquery	S
webpack	webpack	g D	使用するときはwebpack.config.jsを手動で作成し、package.jsonと同階層に保存
webpack	webpack-cli	D	webpackと一緒に使う webpackコマンドでwebpackを実行するためにwebkack4より必要となった gulpでwebpackを動かす場合は不要
babel	babel	D	ES6で書けるようにする ES6->ES5へのトランスパイラー
babel	babel-loader	D	babelと一緒に使う ES6でjsを書いて適切に変換してくれる
babel	@babel/core	D	babelと一緒に使う ES6でjsを書いて適切に変換してくれる
babel	@babel/preset-env	D	babelと一緒に使う ES6でjsを書いて適切に変換してくれる
	browser-sync	D	ファイル変更を監視し、自動でブラウザ更新する
gulp	gulp	D	タスクランナー 手動でやっていた処理を自動化する
gulp	gulp-clean-css	D	cssファイルを圧縮
gulp	gulp-sass	D	sassファイルをcssへ変換
gulp	gulp-imagemin	D	画像ファイルを圧縮
gulp	gulp-changed	D	他のタスクを使う際に、比較して変更あったものだけ実行する
gulp	gulp-notify	D	gulpタスクがエラーになったときに通知表示
gulp	gulp-plumber	D	gulpタスクがエラーになっても止まらずに処理を実行させる
gulp	gulp-webpack-stream	D	webpackと一緒に使う webpackをgulpで操作するために必要

自分用

# !/bin/sh

npm init
npm i jquery -S
npm i webpack -D
npm i webpack-cli -D
export PATH=$PATH:./node_modules/.bin
npm i babel
npm i babel-loader @babel/core @babel/preset-env -D
npm i gulp -D
npm i gulp-clean-css -D
npm i node-sass gulp-sass -D
npm i gulp-imagemin -D
npm i gulp-changed -D
npm i gulp-notify -D
npm i gulp-plumber -D