LogoMark.png

Node.js/npm の変更点


#author("2019-11-27T14:27:30+09:00;2019-11-27T14:26:24+09:00","default:inoue.ko","inoue.ko")
#author("2020-07-02T09:36:21+09:00;2019-11-27T14:26:24+09:00","default:inoue.ko","inoue.ko")
*Node.js|npm
Node Package Manager
~

**概要
***これは何?
npm(Node Package Manager) とは、Node.js の モジュールのインストールを管理するソフトウエアで、Node.js をインストールする際に同時にインストールされます。

Node.js では、その機能の拡張する様々なプログラムがパッケージとして配布されていますが、多くのパッケージをその都度開発プロジェクトに束ねるのは効率的ではありません。そこで「何が必要か」という情報を、''package.json'' という名称の [[JSON]]形式のファイルに記述しておいて、必要なときにコマンド一つで簡単にインストールして利用できるようにする・・というのが npm の役割です。
~

***配布パッケージの利用方法
GitHub等で配布されている Node のサンプルパッケージは、一般に以下の手順で試すことができます(あなたの環境に、Node.js および パッケージマネージャーの npm がインストール済みであることが前提です)。

-ダウンロードしたパッケージをデスクトップ等で解凍・展開します。
-[[Terminal]]で当該ディレクトリに移動して下さい。
--例えば、bauhausユーザーがデスクトップに置いた sampleフォルダ であれば、以下のようにして、ディレクトリを移動できます。
 $ cd /Users/bauhaus/Desktop/sample
--例えば、''user01'' ユーザーがデスクトップに置いた ''sample''フォルダ であれば、以下のようにして、ディレクトリを移動できます。
 $ cd /Users/user01/Desktop/sample
--ls コマンドで、package.json が見える状態であればOKです。
 $ ls
 ・・・・ package.json ・・・・
-必要なパッケージをインストールします。  
  $ npm install
これで、依存するファイルが当該ディレクトリにダウンロードされます。
-以下のコマンドで Webアプリが起動します。
  $ npm start
package.json ファイルの ''start:'' 部分に書かれたスクリプトが実行されます。  
-一般には、Terminalに以下のようなコンソール・ログが表示されて、サーバーが動きます。  
 Server running on port:8000
-ブラウザから以下のようにアクセスすると、Webアプリケーションに接続されます。
 http://localhost:8000
-アプリケーションを終了する場合は、Terminal で、以下の操作を行ってサーバーを停止して下さい。  
  [CTRL]+[C]
~
~

**npmを利用したWebアプリの開発手順

***前提
-[[Terminal]]でログインして操作することが前提です。
-プロジェクト専用のディレクトリをつくって、その場所を「プロジェクトルート」として作業することが前提です。
-プロジェクト専用のディレクトリ(フォルダ)をつくって、その場所を「プロジェクトルート」として作業することが前提です。
~

***プロジェクト専用ディレクトリの準備
-サンプルプロジェクト用のフォルダをつくります。
-サンプルプロジェクト用のディレクトリ(フォルダ)をつくります。
-Terminal を開いて、cd コマンドで当該ディレクトリに移動して下さい。
注)Terminal アイコンがある場合は、当該フォルダをそこに重ねるようにして Terminal を開くと、その時点でカレントディレクトリになっています。
~

***プロジェクトの初期化 > package.json の生成
-プロジェクトの初期化作業を行います。以下のコマンドはプロジェクトルートを開発の現場にするのに必須の作業です。
 $ npm init

-以下のようなメッセージが出て、初期情報の入力が促されます。
 This utility will walk you through creating a package.json file.
 It only covers the most common items, and tries to guess sensible defaults.
 
 See `npm help json` for definitive documentation on these fields
 and exactly what they do.
 
 Use `npm install <pkg>` afterwards to install a package and
 save it as a dependency in the package.json file.
 
 Press ^C at any time to quit.
中断したいときは、[CTRL] + C です。

-最初の項目であるタイトルのみ(例えば sample)、その他はそのままエンターで構いません。最後に確認の(yes)を入力すると、ディレクトリー内には、''package.json'' という名称のファイル が出来上がります。
 $ ls
-最初の項目であるタイトルのみ(例えば sample)、その他はそのまま Enter で構いません。最後に確認の(yes)を入力すると、ディレクトリー内には、''package.json'' という名称のファイル が出来上がります。
 $ ls ← ls はディレクトリの中身を表示するコマンド
 package.json

-以下、package.jsonの内容です。
 $ cat package.json
 $ cat package.json ← cat はファイルの内容を表示するコマンド
 {
    "name": "sample",
    "version": "1.0.0",
    "description": "test",
   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "koichi",
    "license": "ISC",
 }

-''package.json'' はパッケージのバージョン情報を保持した [[JSON]] 形式のデータで、この存在によって使用するパッケージのバージョン管理を一元化することができます。
~

***パッケージの追加
-パッケージの追加には2つの方法があります。
--Node.js の環境本体に追加する(グローバルインストール)
--Node.js の環境本体に追加する(グローバル・インストール)
 $npm install -g  [ PackageName ]
--プロジェクトディレクトリに追加する(ローカルインストール)
--プロジェクトディレクトリに追加する(ローカル・インストール)
 $npm install  [ PackageName ]

-ここでは、テンプレートエンジン [[EJS>Google: Node.js EJS]] というパッケージを、状況が見えやすくなるようプロジェクトローカルにインストールする事例を紹介します。以下のコマンドでパッケージを指定します。
-ここでは、テンプレートエンジン [[EJS>Google: Node.js EJS]] というパッケージを、状況が見えやすくなるようローカル・インストールする事例を紹介します。以下のコマンドでパッケージを指定します。
 $ npm install ejs

-Terminal には、インストール中メッセージが出ます。終了するとプロジェクトディレクトリ内に node_modules という名称のディレクトリができて、その中に以下のように ejs ディレクトリができます。
 . / :プロジェクトルート
  |- packege.json
  |- node_modules 
    |- ejs

-GUIでフォルダを開けて確認するか、あるいは lsで、確認して下さい。
-フォルダを開けるか、あるいは Terminal の lsコマンドで確認して下さい。
 $ ls -al
 drwxr-xr-x   5 user_name   160 10 18 11:38 .
 drwx------+ 59 user_name  1888 10 18 10:58 ..
 drwxr-xr-x   3 user_name    96 10 18 11:38 node_modules
 -rw-r--r--   1 user_name   344 10 18 11:38 package-lock.json
 -rw-r--r--   1 user_name   257 10 18 11:38 package.json

-package.json にはインストール情報が蓄積される仕組みになっていて、このタイミングで、以下のコードが追加されています。
 "dependencies": {
    "ejs": "^2.7.1"
 }

-cat コマンドで確認してみます
 $ cat package.json 
 {
    "name": "sample",
    "version": "1.0.0",
    "description": "test",
   "main": "index.js",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "koichi",
    "license": "ISC",
    "dependencies": {
      "ejs": "^2.7.1"
   }
 }

-付記:package-lock.json とは
package.jsonの変更に際して自動作成・変更されるファイルで、package.jsonに書かれた[ ~ ]や[ ^ ]に従って、アップデート or インストールしたパッケージとバージョンが記載されます。例えて言えば、
--package.json は購入(予定)リスト
--package-lock.json は購入済みリスト


以上、Node.js によるアプリ開発では、ここに自身で開発したファイルが追加されていきます。実際に ejs を用いた事例を、[[Node.js/TemplateEngine]] で紹介していますので、続きはそちらをご覧下さい。
~

***パッケージの配布・ダウンロード
プロジェクトディレクトリそのものが、アプリケーションの全体となりますが、package.json があれば、node_modulesディレクトリは抜きにして、配布することができます。利用者は、配布されたものをダウンロード後に、以下のように install コマンドで必要なモジュールを再構成することができます。 
 $ npm install
これで、package.json に書かれた情報に従って、必要なものがインストールされます。非常に能率的ですね。
以下、サンプルの配布事例です。ダウンロードしてお試しください。
https://github.com/koichi-inoue/NodeJS_WebServer
~




~


**npmコマンド

***パッケージの初期化
プロジェクトルート に package.json が作成されます。
 $ npm init
~

***パッケージのインストール
-グローバルモード(Node.jsの環境自体にインストール)
以下のように ''-g オプション''をつけてコマンドを実行します。パッケージは root が 所有する /usr/lib/node_modules/ などにインストールされます。
 $ npm install –g typings

-ローカルモード(プロジェクトごとにインストール)
プロジェクトルートで以下のようにコマンドを実行します。パッケージはプロジェクトルートにある node_modulesフォルダにインストールされます。
 $ npm install jquery
 $ npm install jquery@1.1.0  (バージョンを指定する例)
~

***パッケージのアップデート
-未更新の確認
 $ npm outdated
-更新
 $ npm update
~

***パッケージのアンインストール
-以下、グローバルとローカルの例
 $ npm uninstall -g  typings
 $ npm uninstall jquery
~

***パッケージの復元
プロジェクトルートにパッケージ情報が記載された package.json を置いて、以下のコマンドを実行します。
 $ npm install
~

***パッケージの起動
パッケージアプリケーションを起動します。
 $ npm start
プロンプトが使えなくなった場合、通常は [CTRL]+[C]で停止できます。
~
~
~