前回までのあらすじ
この記事は続編となっています。シリーズ一覧はこちら:
Part 1 では JavaScript のモジュール機能の代表的な2つの仕様を紹介し、Part 2 ではブラウザや Node.js で実際にモジュールのインポートやエクスポートをする方法を紹介しました。
前回までは自分で作ったモジュールを自分で使う方法しか紹介しませんでしたが、今回はサードパーティー製のモジュールを使う方法として、npm パッケージ について紹介します。
サードパーティー製モジュールを使用する
サードパーティー製モジュールを使用するための Node.js の仕様を紹介したのち、実際に使用する方法を紹介します。
仕様
Part 2 で紹介した通り、Node.js では require() や import 構文でモジュールをインポートできます。それらの構文でモジュールの読み込みを行う対象には node_modules という名前のディレクトリも含まれます。
If the module identifier passed to require() is not a built-in module, and does not begin with '/', '../', or './', then Node.js starts at the directory of the current module, and adds /node_modules, and attempts to load the module from that location. Node.js will not append node_modules to a path already ending in node_modules.
そのため、node_modules ディレクトリにサードパーティー製のモジュールを置いて、それをインポートすることが多いのですが、手動で node_modules ディレクトリに置くのではなく、 パッケージマネージャー を使用して パッケージ をインストールして使うことが一般的です。
ですので、サードパーティー製のモジュールを使いこなすためには、「パッケージ」「パッケージマネージャー」「パッケージレジストリ」について理解する必要があります。それぞれ簡単に説明するとこんな感じです。
- パッケージ
- モジュールと package.json を含むディレクトリ
- 例: React
- パッケージマネージャー
- パッケージレジストリ
- パッケージの保存、管理、配布ができるサービス
- 例: npm Registory
これらを使用して、実際にサードパーティー製モジュールをインポートしてみましょう。
実践
試しに npm パッケージ cowsay をインストールしてみましょう。（npm コマンドを実行できる環境が必要です）空のディレクトリに移動して、以下のコマンドを実行しましょう。
$ npm init -y
$ npm install cowsay
added 41 packages in 1s
3 packages are looking for funding
run `npm fund` for details
すると、以下のファイルやディレクトリが作成されたかと思います。
-
package.json-
dependenciesにcowsayが記載されている
-
-
package-lock.json-
cowsayが依存するパッケージなどが記載されている
-
-
node_modules/-
cowsayとcowsayが依存するパッケージが
-
試しにインストールされた cowsay コマンドを実行してみると以下のように表示されます。
$ npx cowsay hello
_______
< hello >
-------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
では、インストールしたパッケージのモジュールをインポートしてみましょう。
main.js を作成し、以下を入力します。
const cowsay = require('cowsay');
console.log(cowsay.say({ text: "Hello, World!" }));
require('cowsay') で node_modules 内にインストールされた cowsay パッケージのモジュールがインポートできます。
実行すると、問題なく cowsay モジュールが使用できていることが確認できます。
$ node main.js
_______________
< Hello, World! >
---------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
(補足): require('cowsay') と書くと、 node_modules 内のどのファイルの内容がインポートされるの？
require.resolve() を使うと実際にどのファイルが読み込まれたか確認することができます。
console.log(require.resolve('cowsay'));
// => /(省略)/node_modules/cowsay/index.js
require がファイルを探す順番は Node.js の仕様で決まっています。
今回だと cowsay の package.json で main フィールドに index.js が指定されているので、そのファイルが読み込まれました。
"main": "./index",
まとめと次回予告
この記事では、JavaScript でサードパーティーライブラリを使用する代表的な方法として、npmパッケージについて紹介しました。
- Node.js の require()
-
node_modulesというディレクトリ内も読み込みの対象
-
- npmパッケージ
- package.json というファイルで設定する
- npm Registory などのパッケージレジストリでパッケージが保管されている
- npm などのパッケージマネージャーで
node_modulesにインストールする
Part 3 はここまでです。Part 4 以降では以下について書こうと思います。
- TypeScript とモジュールの関係
- Webpack とモジュールの関係