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フロントエンド開発

執筆者:

関連記事

ReactのJSXについて

    スタイル適用 Reactでは全ページとしては統一感をもったスタイルを適用するとともに、コンポーネントごとにスタイルを指定することが可能 classNameとstyle サー ...

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

Reactに関するメモ

    1.ReactでComponentのRenderが行われるタイミング ReactでComponentのRenderが行われるのは以下2つのタイミングのみ stateを更新す ...

SEO対策のまとめ

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

SystemJSのConfig構成について

SystemJSのConfig構成はsystemjs.config.jsファイルで設定される事が多いと思います。今回はAngular2の公式チュートリアルにあるクイックスタートで使用されているsyst ...