Browserifyを使ってnpmのパッケージにあるjQueryを読み込む
最終更新日: Update!!
Node.jsで扱うパッケージマネージャーのnpmにはjQueryもあります。jQueryはCDNや公式からライブラリのソースコードをダウンロードしてきて使うこともできますが、実際のファイルやソースコードを見ないとバージョンがわからないため、package.jsonで一括で管理できると便利です。今回はnpmでインストールしたjQueryをjsファイル内で読み込んで使う方法をまとめていきたいと思います。
実際には今回のように毎回指定したソースコードファイルごとにコマンドを実行し、読み込んだ後のソースコードを生成するのは面倒ですので、Gulpなどのタスクランナーと組み合わせて使うことが多いようです。次回はその時の方法などもまとめてみたいと思います。
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()で読み込むことができます。
dependenciesとdevDependenciesのインストールについて
npmでモジュールをインストールするときには、インストールの方法として「dependencies」と「devDependencies」の2つがあります。これらはインストール時のオプション違いでインストール方法が決まります。// dependenciesとしてインストール(本番環境でもバージョン管理が必要) $ npm install --save // devDependenciesとしてインストール(開発環境だけでバージョン管理をする) $ npm install --save-dev使い分けとしては、本番環境でも使うものはdependenciesとして、開発環境のみで使うものはdevDependenciesとしてインストールすると覚えておくと良いですね。
実際には今回のように毎回指定したソースコードファイルごとにコマンドを実行し、読み込んだ後のソースコードを生成するのは面倒ですので、Gulpなどのタスクランナーと組み合わせて使うことが多いようです。次回はその時の方法などもまとめてみたいと思います。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories