Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Node.js 2020.04.08

Browserifyを使ってnpmのパッケージにあるjQueryを読み込む

Tags: ,,,

Node.jsで扱うパッケージマネージャーのnpmにはjQueryもあります。jQueryはCDNや公式からライブラリのソースコードをダウンロードしてきて使うこともできますが、実際のファイルやソースコードを見ないとバージョンがわからないため、package.jsonで一括で管理できると便利です。今回はnpmでインストールしたjQueryをjsファイル内で読み込んで使う方法をまとめていきたいと思います。

 

npm経由でjQueryをインストール

まずは下記のコマンドでjQueryのライブラリをインストールします。「jquery@X.XX.X」という表記にすることでバージョンを指定してインストールすることもできます。

$ npm install --save jquery

 

インストールが完了すると「package.json」に追記されているのが確認できます。バージョンも一目でわかるので便利ですよね。

【package.json】※一部抜粋

{
 ..........
 "dependencies": {
  "jquery": "^3.4.1"
 },
 ..........
}

 

これで、jQueryのパッケージがインストールできましたので、jQueryのモジュールをrequire()で読み込んで、jQueryを使ったコードを書いてブラウザで確認してみます。

【javascript】

const $ = require('jQuery');
$(function(){
 alert("jQueryを読み込みました!");
});

 

すると、コンソールでエラーが表示されてしまいました。どうやら、require()が使えないとのことです。実際のソースコードを確認してみると、jQueryのライブラリのソースコードは読み込まれていませんでした。

【console】

Uncaught ReferenceError: require is not defined

 

このrequire()はNode.jsの環境で使えるもので、ブラウザ側では読み込むことができません。そこで「Browserify」というパッケージをインストールすることで、ブラウザ側でもrequire()を使えるようにしていきます。

 

Browserifyのインストール

Browserifyもnpm経由でインストールしていきます。下記のコマンドでパッケージを追加します。

$ npm install --save-dev browserify

 

インストールが完了すると、同じくpackage.jsonに追記されているのが確認できます。これで準備が完了しました。

【package.json】※一部抜粋

{
 ..........
 "dependencies": {
  "jquery": "^3.4.1"
 },
 "devDependencies": {
  "browserify": "^16.5.1",
  ..........
 }
 ..........
}

 

Browserifyをインストールすると、下記のコマンドで、require()で指定したモジュールのソースコードを読み込んだソースコードを生成してくれます。browserifyの後に「対象となるソースファイル」続けて「-o」オプションの後に、ビルド先を指定して、「生成するソースコードファイル」を指定します。

$ npx browserify src/●●●●●.js -o dist/●●●●●.js

 

これで実際に確認してみると、jQueryのライブラリとなるソースコードが読み込まれて、jQueryで作成した処理が実行されていることが確認できました。普段はCDNなどで利用することも多いjQueryですが、このようにnpmで一括して管理できるのは便利ですね、もちろんjQuery以外でもNodeのモジュールであれば同じようにrequire()で読み込むことができます。

 


 

実際には今回のように毎回指定したソースコードファイルごとにコマンドを実行し、読み込んだ後のソースコードを生成するのは面倒ですので、Gulpなどのタスクランナーと組み合わせて使うことが多いようです。次回はその時の方法などもまとめてみたいと思います。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?