Zenn
🐡

webpackというものを触ってみる - Jsのライブラリをコンパイルに含める

2022/10/17に公開
JavaScript
jQuery
webpack
frontend
tech

はじめに

前回の記事からの続きです。

https://zenn.dev/kuroinu/articles/20221016_webpack2_babel

今回は、jQueryをコンパイルに含める手順を確認したいと思います。
個人的には公式のHPからJsファイルをダウンロードして自分のサーバーに配置して読み込む…というのが基本的なイメージなのですが、最近はそんな事も無いようでFWとかライブラリのHPのインストール手順を見ていると npm とか yarn とかが出てきます。
それを使ってjQueryを導入したいと思います。

尚、『今更jQuery？』とツッコまれてしまうかもしれませんが、とりあえず使い慣れたモノを導入するという事で選びましたので、ツッコまないであげてください。

環境

  • windows10 (wsl2)
  • node(v16.18.0)
  • yarn(1.22.19)

ディレクトリ構成やファイルの内容は前回の最後から引き続きです。

jQueryをインストール

まずはインストールします。

$ yarn add jquery

これまで -D をつけていましたが、今回はつけていません。
-D をつけていると実行ファイルに含まれないらしく、jQueryは含めたいので -D をつけていません。
-D をつけずにインストールすると package.json の dependencies に記述されます。

次に ./src/index.js を編集してjQueryをインポートします。

./src/index.js
import { sum } from "./js/sum";
import { minus } from "./js/minus";

+ // jQueryをインポートして$で使える様にする。
+ import jQuery from "jquery";
+ const $ = jQuery;

sum();
sum(5, 4);
minus();
minus(4, 2);

ひとまず、この時点でコンパイルしてから ./dist/main.js を確認すると、jQueryのコードが含まれてえらい規模のファイルになっている事がわかります。
では、jQueryの機能を使えるのかを確認してみます。
./dist/index.html を編集します。

./dist/index.html
<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="./main.js"></script>
</head>
<body>
    <h1>webpackというものを触ってみる。</h1>
    <hr>
+   <button id="btn-alert">show alert</button>
+   <input type="text" name="message" id="message">
</body>
</html>

button と input:text とを追加しました。
ボタンを押下すると入力した文字をアラートに表示する処理を追加します。

./index.js
import { sum } from "./js/sum";
import { minus } from "./js/minus";

// jQueryをインポートして$で使える様にする。
import jQuery from "jquery";
const $ = jQuery;

sum();
sum(5, 4);
minus();
minus(4, 2);

+ $(() => {
+     // アラートに入力した文字を表示する。
+     $("#btn-alert").on("click", (e) => {
+         alert($("#message").val());
+     });
+ });

ローカルサーバーを起動して文字を入力しボタンを押下するとアラートが表示されればjQueryが機能している事を確認できます。

その他

./webpack.config.js の mode で development を指定してもまとめられたJsのコードがevalの中に入ってしまってよくわからないなと思っていたのですが、 devtool という設定を追加する事でコンパイルの内容を設定できる様子です。
試しに devtool: "source-map", としてコンパイルしてみると、自分で書いた関数がそのままの形で確認できました。
設定値は色々ある様なので、公式ドキュメントをご確認ください。

この時点でのディレクトリ構成等

$ tree -I node_modules
.
├── dist
│   ├── index.html
│   ├── main.js
│   ├── main.js.LICENSE.txt
│   └── main.js.map
├── package.json
├── src
│   ├── index.js
│   └── js
│       ├── minus.js
│       └── sum.js
├── webpack.config.js
└── yarn.lock
package.json
{
  "name": "20221014_webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.4",
    "babel-loader": "^8.2.5",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "jquery": "^3.6.1"
  }
}
webpack.config.js
module.exports = {
    // モード
    // development:ソースマップが有効
    // production:コード圧縮
    mode: "development",

    devtool: "source-map",

    // エントリーポイントのJs
    entry: `./src/index.js`,

    // コンパイルした結果を出力する先の設定
    output: {
        path: `${__dirname}/dist`,
        filename: `main.js`
    },

    // webpack-dev-serverの設定
    devServer: {
        static: "dist",     // 公開するルートディレクトリ
        open: true,         // サーバー起動後自動でブラウザ立ち上げ
        // port: 8081          // ポートを指定したい場合に記述。 デフォルトは8080。
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        // Babelの設定
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env"
                            ]
                        }
                    }
                ]
            }
        ]
    },

    // ES5(IE11等)向けにコンパイルする設定
    target: ["web", "es5"]
}

おわりに

個人的に気になる点として、 ./dist/index.html のイベント処理を ./src/index.js に記載している事にとても違和感があります。
が、コンパイルしてまとめるとHTML側からは呼べない様な情報が多々出てきたので、そういうものなのかと一旦納得？しています。
確かに、 ./webpack.config.js の mode を production としてコンパイルすると、自分で作成した関数の名前が完全に違うものになっているので、HTML側からは呼べないな…と。
ただこうなると、これまでのJsの書き方とは大きく違うなという事で、今後学習していこうと思います。

まだ全く実戦で使う事はできない感じですががJsのライブラリの導入はできたので、次はコンパイルにCSSを含めてみたいと思います。

参考

https://ics.media/entry/16028/

Discussion