WEB WEBフロントエンド開発

Node.jsのrequire関数のモジュール読み込みについて

投稿日:2017年11月13日 更新日:

Node.js のモジュール機構について(JavaScript の場合)

ディレクトリ構造

Node.js のパッケージマネージャーである npm を使う場合、プロジェクト ディレクトリは以下のような構成になります(gulp をインストールした場合)。

 

  ・プロジェクト ディレクトリ
     ├ node_modules
         └ gulp
              ├package.json(※2)
              ├index.js
              ...
          ...
     ├package.json(※1)
     ├gulpfile.js
     ├sub.js(※3)

 

  • プロジェクト ディレクトリ直下にある package.json(※1) は、このプロジェクトで使用している npm モジュールへの参照が書かれています(npm install コマンドの--saveで書き込まれます)。
  • node_modules ディレクトリの下に、npm でインストールした各モジュールのディレクトリが作られます。
  • gulp ディレクトリの下にある package.json(※2) には、gulp モジュールが依存しているモジュールの一覧をはじめ、gulp モジュールの構成情報が書かれています。
  • sub.js は gulpfile.js の中で使われるファイルだと思ってください。

 

モジュールのインポート

Node.js では require 関数でモジュールを読み込みます。

  • 1 行目は gulp モジュールを読み込んでいます。
  • パスを指定せずモジュール名だけを書くと、node_modules ディレクトリ下にあるモジュールを読み込みます。
  • この場合 Node.js は、node_modules/gulp ディレクトリの中の package.json を見に行きます。
  • package.json に main エントリーがあれば、それがこのモジュールのエントリー ポイントになりますので、そのファイルを実行します。
  • gulp の場合は main エントリーが無いので、この場合、index.js が実行されます。
  • 2 行目はプロジェクト ディレクトリ下にある sub.js(※3) を読み込んでいます。
  • npm のモジュールではない他の JavaScript ファイルを読み込む場合、同じディレクトリにあっても、パス(./)を付ける必要があります。
  • 拡張子 .js は付けても付けなくても構いませんが、一般的には付けません。

スポンサーリンク

スポンサーリンク

-WEB, WEBフロントエンド開発

執筆者:

関連記事

HTML5についてのメモ書き

FileSystem API     HTML5 FileSystem Explorer Chromeの拡張機能に「HTML5 FileSystem Explorer」というツール ...

SEO対策のまとめ

SEO対策は良く言われるように、(1)クローラーの巡回フェーズ、(2)ページのインデックス登録フェーズ、(3)検索順位決定フェーズの3つのフェーズで考える必要があるようです。SEO対策は様々なWEBペ ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...

npmについて

コマンドについて ・コマンド コマンド 説明 npm init 対話形式で項目を入力してpackage.jsonを作成します。 npm init -y デフォルト値でpackage.jsonを作成しま ...

JavaScriptのコンストラクタとプロトタイプについて

概要 Javascriptにはクラスという概念はない コンストラクタ定義+newによってインスタンスを生成する。 ES6以前ではclass構文が実装がされていなかったので、prototypeという機能 ...