Node.js プロジェクトで node_modules フォルダ内のスクリプトを読み込む方法

2024-04-02

Node.js プロジェクトで node_modules フォルダ内のスクリプトを読み込む方法

require() 関数は、Node.js モジュールを読み込むために使用されます。 node_modules フォルダ内のスクリプトを読み込むには、モジュールの名前を指定します。

例：

// node_modules/twitter-bootstrap/dist/js/bootstrap.min.js を読み込む
const bootstrap = require('twitter-bootstrap');

// bootstrap の機能を使用
console.log(bootstrap.version);

相対パスを使う

require() 関数は、相対パスを使ってスクリプトを読み込むこともできます。

// node_modules/twitter-bootstrap/dist/js/bootstrap.min.js を読み込む
const bootstrap = require('../node_modules/twitter-bootstrap/dist/js/bootstrap.min.js');

// bootstrap の機能を使用
console.log(bootstrap.version);

npm パッケージは、Node.js モジュールを管理するためのツールです。 npm パッケージを使ってスクリプトを読み込むには、package.json ファイルにモジュールの名前を記述します。

// package.json

{
  "dependencies": {
    "twitter-bootstrap": "^4.6.0"
  }
}

上記の package.json ファイルを元に npm install コマンドを実行すると、node_modules フォルダに twitter-bootstrap モジュールがインストールされます。

インストール後、以下のコードでスクリプトを読み込むことができます。

// node_modules/twitter-bootstrap/dist/js/bootstrap.min.js を読み込む
const bootstrap = require('twitter-bootstrap');

// bootstrap の機能を使用
console.log(bootstrap.version);

CDN を使う

CDN (Content Delivery Network) は、Web サイトの静的コンテンツを高速に配信するためのネットワークです。 Twitter Bootstrap のような一般的なライブラリは、CDN でホスティングされていることが多いです。

CDN を使う場合は、以下のコードのように <script> タグを使ってスクリプトを読み込むことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitter Bootstrap を CDN で読み込む</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  <script>
    // bootstrap の機能を使用
    console.log(bootstrap.version);
  </script>
</body>
</html>

Node.js プロジェクトで node_modules フォルダ内のスクリプトを読み込むには、いくつかの方法があります。状況に合わせて最適な方法を選択してください。

例 1: require() を使う

// node_modules/twitter-bootstrap/dist/js/bootstrap.min.js を読み込む
const bootstrap = require('twitter-bootstrap');

// bootstrap の機能を使用
console.log(bootstrap.version);

例 2: 相対パスを使う

// node_modules/twitter-bootstrap/dist/js/bootstrap.min.js を読み込む
const bootstrap = require('../node_modules/twitter-bootstrap/dist/js/bootstrap.min.js');

// bootstrap の機能を使用
console.log(bootstrap.version);

例 3: npm パッケージを使う

// package.json

{
  "dependencies": {
    "twitter-bootstrap": "^4.6.0"
  }
}

// node_modules/twitter-bootstrap/dist/js/bootstrap.min.js を読み込む
const bootstrap = require('twitter-bootstrap');

// bootstrap の機能を使用
console.log(bootstrap.version);

例 4: CDN を使う

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Twitter Bootstrap を CDN で読み込む</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

  <script>
    // bootstrap の機能を使用
    console.log(bootstrap.version);
  </script>
</body>
</html>

ES6 モジュールは、JavaScript のモジュールシステムです。 ES6 モジュールを使う場合は、以下のコードのように import キーワードを使ってスクリプトを読み込むことができます。

// node_modules/twitter-bootstrap/dist/js/bootstrap.min.js を読み込む
import bootstrap from 'twitter-bootstrap';

// bootstrap の機能を使用
console.log(bootstrap.version);

Webpack は、JavaScript モジュールバンドラです。 Webpack を使う場合は、以下のコードのように webpack.config.js ファイルで設定を記述することで、node_modules フォルダ内のスクリプトをバンドルすることができます。

// webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.js$/,
        include: /node_modules/,
        loader: 'imports-loader?define=>false'
      }
    ]
  }
};