npmで導入したパッケージを使う
パッケージのインストールは、npm i <パッケージ名>だけで簡単に行なえます。
サーバで使う際はそのまま、ブラウザで動かすためにはwebpackを使用するなど、ビルドが必要です。
目次
npmを使える状態にする
npmインストール後は、各プロジェクトで利用できるようにする必要があります。
gitのときと同じように、
npm init
を実行します。とりあえず何も入力せず適当に全部Enterで問題ありません。
initすると、package.jsonが生成されます。設定を変更したい場合、後でpackage.jsonを開いて書き換えればokです。
package.jsonがある場所の子のディレクトリにもpackage.jsonを置くことができます。その場合、あるファイルの親ディレクトリのうち、最も近いpackage.jsonと関連モジュールが利用されます。
パッケージを使う
導入
適当なパッケージをインストールしてみます。今回は動作させる基本的な部分を紹介するため、シンプルなパッケージとしてuuidを導入します。
npm i uuid
スクリプトで利用する
導入したパッケージは、Javascript側で利用できます。package.jsonがあるフォルダと同じ場所か、子孫ディレクトリにapp.jsを作成します.
const uuid = require("uuid");
console.log(uuid.v4());
作成したら, node app.jsをして実行しましょう。
$ node app.js ec2bfcc0-4d05-4219-8162-4d5c03975627
uuidが出力されました、パッケージをうまく読み込めているようです!
パッケージの使い方の種類
パッケージの読み込みには2種類あります。
const uuid = require("uuid");
import * as uuid from "uuid";
require文は、Node.jsで読み込むためのものです。
import文は、モジュールとしてJavascriptを読み込む必要があります。HTML側で<script src="..." type="module"></script>のようにmoduleとして読み込んで使用します。
Node.jsでimport文を利用する場合、ファイルを.mjsにし、node --experimental-modules app.mjsのようにして実行します。
基本的にどちらでも良いですが、Node.jsで利用する場合はrequireの方がトラブルは少ないかと思います。AWS Lambdaでもimportでは動作せず、requireである必要があります。
しかし、importの方が必要な分だけ読み込め、Node.jsを通さない普通のJavascriptでも利用できるため、汎用性や速度としては上です。ビルドしてブラウザで動かすためのjsを作成する場合は、サイズ軽減も兼ねて、こちらを使うことがおそらく多いです。
Node.jsでは、requireは同期的に読み込み、importは非同期で読み込みます。
また、requireはコードの途中で必要になったタイミングで読み込みますが、importは最初に一括で読み込みます。
requireしたものに別名をつける
一部だけをrequireして利用する際は、次のように書きます。
const {v4} = require("uuid");
これでv4()とすると実行できますが、これでは名前が被る可能性があります。
そこで、{v4 : uuidv4}のように、{importするもの: 別名}とすると、別名で利用できます。
const {v4: uuidv4} = require("uuid");
console.log(uuidv4());
importしたものに別名をつける
全部インポートの場合はimport * as 別名 from "モジュール"とします。
import * as uuid from "uuid"; console.log(uuid.v4());
個別にインポートする場合は、{importするもの as 別名}で行えます。
import {v4 as uuidv4} from "uuid";
console.log(uuidv4());
ブラウザで動かすには
requireしても読み込めないため、そのままは動きません。そこで、依存関係を解消してファイルを纏める、ビルドという操作が必要になります。
これについてはwebpackなど、Node.jsのビルドツールを利用する必要があります。
webpackを利用したビルドの方法は下の記事にあります。
まとめ
インストールしたパッケージは、Javascriptからrequireかimportで利用できます。
requireとimportはほぼ同じ機能を持っていますが、使い方が少し異なるので、開発するものに応じてスムーズに利用できる方を用いると良いと思います。
