npm でインストールした node module をバニラJSで使いたい

Last updated at 2025-11-12Posted at 2025-11-11

ざっくり手順

npm コマンドを使用できるようにする（まだ使えなければ）
ライブラリを一つの JS ファイルにビルドして <script> で読み込めるようにする
1. npm でライブラリをインストールする
2. package.json の設定
3. ビルド対象ファイルの作成
4. ビルド実行
5. 動作確認

手順

npm コマンドを使用できるようにする（Mac 向け）
1. Homebrew のインストール
```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```
2. npm のインストール
```
# brew のパスを通してから実行
export PATH="/opt/homebrew/bin:$PATH"
brew install node
```
3. インストール確認（npm を使用できるようにするということは node を使用できるようにするということ）
```
node -v
npm -v
```
参考
Node.js,npmのインストール

ライブラリを一つの JS ファイルにビルドして <script> で読み込めるようにする

npm でライブラリをインストールする
任意のディレクトリにワークディレクトリを作成して以下を実行
```
npm install marked # インストールしたい任意のライブラリ
npm install esbuild # ビルド用のライブラリ
```
package.json の設定
npm コマンドでライブラリをインストールするとワークディレクトリに以下のようなファイルが作成される（現状の記載ではどのライブラリに依存関係があるかのみ記載されている）
package.json
```
{
  "dependencies": {
    "marked": "^17.0.0"
  },
  "devDependencies": {
    "esbuild": "^0.23.0"
  }
}
```
インストールしたライブラリをバニラJSから使用するにはライブラリをビルドする必要があるので、そのための記載を追加
package.json
```
{
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/bundle.js",
  },
  "dependencies": {
    "marked": "^17.0.0"
  },
  "devDependencies": {
    "esbuild": "^0.23.0"
  }
}
```
以下の記載を追加することで初めて npm run build が実行できるようになる
```
  "scripts": {
    "build": "esbuild src/index.js --bundle --outfile=dist/bundle.js",
  }
```
ビルドコマンド補足
- src/index.js：ビルド対象ファイル（後述）
- --bundle：ライブラリを1個のJSファイルにすることを明示する引数
- --outfile=~：ビルドしたJSファイルの出力先を指定する引数
ビルド対象ファイルの作成
ワークディレクトリに src/index.js を作成し以下の内容を記載する（srcディレクトリは作成する）
index.js
```
import { marked } from 'marked';
window.marked = marked; // ライブラリをグローバルでしよう可能にする
```
ビルドの実行
```
npm run build
```
上記を実行し、ワークディレクトリに dist/bundle.js が作成されていたらOK

動作確認
以下の階層で html を作成

├── dist
│   └── bundle.js
├── index.html
├── package.json
└── src
    └── index.js

htmlサンプル

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bundle Test</title>
  </head>
  <body>
    <h1>Marked.js バンドルテスト</h1>
    <div id="output"></div>

    <!-- バンドルされたファイルを読み込み -->
    <script src="dist/bundle.js"></script>
    <script>
      // marked がグローバルに使える
      const markdown = "# Hello World\n\nThis is **bold** text.";
      const html = marked.parse(markdown);
      document.getElementById("output").innerHTML = html;
    </script>
  </body>
</html>

無事に実行が完了している

応用

package.json を工夫して複数ファイルのビルドを行う

ライブラリごとに import 用の js を作成して、 package.json を以下のような記載にすればライブラリごとにバニラJSで使用できる js ファイルを作成できる

package.json

{
  "scripts": {
    "build": "npm run build:marked && npm run build:dompurify",
    "build:marked": "esbuild src/marked.js --bundle --outfile=dist/marked.bundle.js",
    "build:dompurify": "esbuild src/dompurify.js --bundle --outfile=dist/dompurify.bundle.js"
  },
  "dependencies": {
    "dompurify": "^3.3.0",
    "marked": "^17.0.0"
  },
  "devDependencies": {
    "esbuild": "^0.23.0"
  }
}

ライブラリをグローバルにせずに import で使用できるようにする

libs.js

import { marked } from 'marked';
import DOMpurify from 'dompurify';
export { marked, DOMpurify };

package.json

{
  "scripts": {
    "build": "esbuild src/libs.js --bundle --outfile=dist/libs_bundle.js"
  },
  "dependencies": {
    "dompurify": "^3.3.0",
    "marked": "^17.0.0"
  },
  "devDependencies": {
    "esbuild": "^0.23.0"
  }
}

main.js

import { marked, DOMpurify } from './dist/libs_bundle.js'; // 相対パス必須
const markdown = "# Hello World\n\nThis is **bold** text.";
const html = marked.parse(markdown);
document.getElementById("output").innerHTML = html;

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bundle Test</title>
  </head>
  <body>
    <h1>Marked.js バンドルテスト</h1>
    <div id="output"></div>

    <script src="dist/bundle.js"></script>
    <!-- import, export を使用する場合は type="module" で読み込む -->
    <script type="module" src="dist/libs.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up