やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

Node.js+npmでWeb開発環境を構築するための予備知識

特にnpmの概念と使い方について。

発端

前回、Web開発環境について調べてみた。

フロントエンド開発環境について調べてみた - やってみる

今回は少し具体的にいく。だが基礎知識がない。

WEB開発したい→環境構築すべき→npmなにそれ?

じつは環境構築するためには事前に勉強せねばならない……。

開発環境

最低限の環境構築

ツール 概要
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とするとそのようにインストールできる。

参照

開発しやすい環境の作り方~Web系~ - Qiita