More than 3 years have passed since last update.

npmパッケージのjqueryをブラウザで使えるようにする

Last updated at 2020-12-13Posted at 2020-12-13

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

/*
$ npm install --save jquery
*/

package.json

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

jQueryのモジュールをrequire()で読み込んで、jQueryを使ったコードを書いてブラウザで確認してみるも。。。

resources/js/jquery.js

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

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

Uncaught ReferenceError: require is not defined

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

package.json

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

Browserifyをインストールすると、下記のコマンドで、require()で指定したモジュールのソースコードを読み込んだソースコードを生成してくれます。

browserifyの後に「対象となるソースファイル」続けて「-o」オプションの後に、ビルド先を指定して、「生成するソースコードファイル」を指定します。

$ npx browserify resources/js/jquery.js -o public/jquery/jquery.js

あとは適宜htmlで読み込んで使用！