Zenn
🗿

npmとwebpackでjqueryをパッケージ管理する備忘録

2023/11/05に公開
JavaScript
jQuery
webpack
npm
tech

目次

  1. 概要
  2. ソースコード
  3. npmでjqueryを管理する
  4. webpackの導入
  5. まとめ

概要

今回はjqueryをnpmで管理しwebpackを使用してバンドルすることで、レガシーなフロントエンドをモダンに近づけたいと思います。

未だにjqueryとそのプラグインのソースコードをダウンロードし、プロジェクト内に配置しjqueryを使用しているプロジェクトは少なからず存在していると思います。

そんな環境からReactやVue.jsなどのモダンなフロントエンドへ移行していく作業の1ステップとしていつか役に立てばという思いで備忘録として残しておきます。

ソースコード

今回使用するファイルのディレクトリ構造とファイルは以下の通りです。

├─public
│  └─index.html
└─src
   ├─index.js
   └─button
      ├─event.js
      ├─read.js
      └─write.js
index.html
<!DOCTYPE html>
<html>
  <body>
    <p class="target">jquery</p>
    <button class="button">convert</button>
  </body>
</html>
<script src="./index.bundle.js"></script>
index.js
import $ from "jquery";
import { clickEvent } from "./button/event";

$(".button").on("click", clickEvent);
event.js
import { readTarget } from "./read";
import { writeText } from "./write";

export const clickEvent = () => {
  const target = readTarget();
  writeText(target);
};
read.js
import $ from "jquery";

export const readTarget = () => $(".target").get(0);
write.js
export const writeText = (element) => {
  const text = element.textContent;
  if (text !== "JQUERY") {
    element.textContent = "JQUERY";
  } else {
    element.textContent = "jquery";
  }
};

npmでjqueryを管理する

まずnpmでjqueryを管理します。

$ npm init
$ npm install jquery

これでpackage.jsonが作成されjqueryをnpmで管理出来ます。
今後package.jsonを元にjqueryやその他ライブラリを管理しましょう。

npm自体のインストール方法は割愛します。

webpackの導入

次にnpmで管理しているjqueryをimport $ from "jquery";などで読み込むためにwebpackを導入します。

$ npm install webpack webpack-cli --save-dev

webpackは設定ファイルで設定を管理出来るため、設定ファイルを作成します。

webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  resolve: {
    extensions: [".js"],
  },
};

この設定ファイルでは./src/index.jsを起点に使用されているライブラリやモジュールを1つのファイルにバンドルします。
今回はindex.jsとbuttonディレクトリ配下のjavascriptファイルが1つのファイルにバンドルされます。

また、バンドルしたファイルはoutputによりファイル名と出力先のパスが設定されています。
この設定ファイルでは、ファイル名.bundle.jsという名前でpublicディレクトリ配下にファイルが作成されます。

HTMLファイルではこのバンドルされたindex.bundle.jsのファイルを読み込むことでnpm管理下のjqueryをimport $ from "jquery";などで読み込んで使用することが出来ます。

webpackでファイルをバンドルしましょう。

$ npm run webpack

publicディレクトリ配下にindex.bundle.jsファイルが作成されたと思います。
index.htmlをブラウザで開くとjavascriptが動作していることが分かると思います。

webpack-dev-serverの導入

webpack単体ではファイルを変更するたびにバンドルする必要がありました。
なのでファイルの変更を検知して自動でバンドル出来るようにwebpack-dev-serverを導入します。

$ npm install webpack-dev-server --save-dev

設定ファイルも書き換えましょう。

webpack.config.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  resolve: {
    extensions: [".js"],
  },
  devServer: {
    open: true,
    static: path.join(__dirname, "public"),
  },
};

以下のコマンドで起動しましょう。

$ npm run webpack serve

これでjavascriptなどのファイルを変更すると自動でその変更が反映されるようになりました。

環境ごとに設定を変える

これまで1つの設定でファイルをバンドルしてきましたが、開発環境や本番環境では設定を変えたい場面が出てくると思います。
そのため、開発環境用と本番環境用の設定ファイルを用意し環境によって設定を切り替えるようにします。
ファイル名はwebpack.config.[環境名].jsになります。

これまでの設定ファイルは開発環境用の設定にしましょう。

webpack.config.dev.js
const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  resolve: {
    extensions: [".js"],
  },
  devServer: {
    open: true,
    static: path.join(__dirname, "public"),
  },
};

本番環境用の設定ファイルではconsole.logやコメントを削除する設定にしています。

webpack.config.production.js
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  resolve: {
    extensions: [".js"],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
          format: {
            comments: false,
          },
        },
      }),
    ],
  },
};

npmによるコマンドの簡略化

npmでは開発時のサーバーの起動と本番環境でのビルドのコマンドをpackage.jsonで記述することでコマンドを簡略化することが出来ます。

package.json
{
  "name": "jquery",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack serve --config webpack.config.dev.js",
    "build": "webpack --config webpack.config.production.js"
  },
  "dependencies": {
    "jquery": "^3.7.1"
  },
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

scripts内に開発時のサーバー起動用のdevコマンドと本番環境でのビルド用のbuildコマンドを定義しました。
今後は以下のように実行可能です。

$ npm run dev // 開発サーバーの起動
$ npm run build // 本番環境用のビルド

まとめ

以上がjqueryをnpmで管理するwebpackでバンドルする備忘録でした。
javascriptのファイルについては『迷わない！困らない！レガシーフロントエンド安全改善ガイド』を一部参考にしています。
https://nextpublishing.jp/book/11098.html

Discussion