概要

npm を利用してライブラリ（lodash）を利用してみるまで

前提

 % cat /etc/system-release
Amazon Linux release 2 (Karoo)
 % node --version
v12.16.3

手順

プロジェクト作成

まずはプロジェクト作成。適当にEnter押して package.json を作成

% npm init
% cat package.json       
{
  "name": "npm_test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

package.json のうち、少し気になる項目だけ調べてみると…

main

main はそのパッケージを外からインポートするときにどの JavaScript ファイルが入り口であるかを指定するものである。誰かのパッケージを外から使うときに、そのパッケージをインポートするとは具体的にどのファイルをインポートするということなのかを確認するときに見ればよい。自分のパッケージのpackage.jsonの main は、そのパッケージを NPM で公開しない限り重要ではない。

scripts

scripts は簡単に言えばコマンドのエイリアスであり、任意のコマンド(i.e. コマンドラインのコマンド)に名前をつけることができる。

ちょっと検証してみる。scripts に test2 を追加

 % cat package.json
{
  "name": "npm_test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "test2": "echo hoge"
  },
  "author": "",
  "license": "ISC"
}

npm run [スクリプト名] で実行できるので、実行してみる。

% npm run test2   

> npm_test2@1.0.0 test2 /home/ec2-user/work/boids/npm_test2
> echo hoge

hoge

ふむ、sctipts に定義したスクリプトが実行された。

ライブラリインストール

さて、パッケージをインストールしてみる。ためしに lodash をインストールする。 save-dev オプションを指定することにより、npmのグローバル領域ではなく、そのディレクトリ内でパッケージが管理される。インストール後確認すると、 devDependencies に追加されたパッケージの情報が表示される。 node_modules ディレクトリ内に資材が格納される。

% npm install --save-dev lodash
% cat package.json
{
  "name": "npm_test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "test2": "echo hoge"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lodash": "^4.17.15"
  }
}
% ls
node_modules  package-lock.json  package.json

ライブラリの使用

このライブラリを使ってみる。 require して _. で lodash が使えていることを確認する。

% vim main.js
var _ = require('lodash');

console.log("hoge");
console.log(_.isString("abc"));
% node main.js  
hoge
true

さて、ブラウザからも使えるか試してみる。表示用のhtmlファイルを作成する。

% cat index.html  
<!DOCTYPE html>
<html>
  <head>
    <title>Main</title>
  </head>
  <body>
  </body>
  <script src="main.js"></script>
</html>

Webサーバを起動してみる。サーバは何でもいいので、今回は組み込みWebサーバをワンライナーで使えるRubyを使ってみる。

% sudo ruby -rwebrick -e 'WEBrick::HTTPServer.new(:DocumentRoot => "./", :Port => 80).start'

クライアントからアクセスする。Webコンソールで確認すると、おそらく以下のエラーが出ているはず。

main.js:1 Uncaught ReferenceError: require is not defined
    at main.js:1

以下あたりを確認すると、ブラウザでは外部ライブラリを参照するrequireは使えないみたい。

require()とは何か？何が便利なのか - Qiita https://qiita.com/uryyyyyyy/items/b10b012703b5396ded5a require is not definedを解消してrequireを使えるようにする - 文系プログラマー http://uraway.hatenablog.com/entry/2015/11/30/require_is_not_defined%E3%82%92%E8%A7%A3%E6%B6%88%E3%81%97%E3%81%A6require%E3%82%92%E4%BD%BF%E3%81%88%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B

次はブラウザでnpm でインストールしたライブラリを使ってみるところから。

memo.log

技術情報の雑なメモ

npm の勉強メモ（1）

概要

前提

手順

プロジェクト作成

main

scripts

ライブラリインストール

ライブラリの使用