Spring Boot + npm + Geb で入力フォームを作ってテストする ( 番外編 )( webpack で jQuery だけバンドルしないで外部ファイルを利用するには？ )

概要

記事一覧はこちらです。

既存のページで既に jQuery を使用しており、そこに webpack でバンドルした js ファイルを導入したい場合に、jQuery だけバンドルしないで外部ファイルの jQuery を利用する方法が知りたくなったので調べてみます。

参照したサイト・書籍

1. webpackでCDNから取ってきたりした外部のjQueryなどを利用する方法
   http://frontend-takuyan.hateblo.jp/entry/jquery-in-webpack

2. webpack - Externals
   https://webpack.js.org/configuration/externals/

目次

1. webpack.config.js を変更する
2. 動作確認

本文

webpack.config.js を変更する

webpackでCDNから取ってきたりした外部のjQueryなどを利用する方法 の記事にずばりその通りの内容が記載されていました。webpack.config.js に以下の記述を追加すればいいそうです。

var webpack = require('webpack');

module.exports = {
    entry: {
        "js/app": ["./src/main/assets/js/app.js"],
        "js/inquiry/input01": ["./src/main/assets/js/inquiry/input01.js"],
        "js/inquiry/input02": ["./src/main/assets/js/inquiry/input02.js"],
        "js/inquiry/input03": ["./src/main/assets/js/inquiry/input03.js"],
        "js/inquiry/confirm": ["./src/main/assets/js/inquiry/confirm.js"]
    },
    output: {
        path: __dirname + "/src/main/resources/static",
        publicPath: "/",
        filename: "[name].js"
    },
    resolve: {
        modules: [
            "node_modules",
            "src/main/assets/js"
        ],
        alias: {
            jquery: "jquery"
        }
    },
    externals: {
        jquery: "jQuery"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

• externals: { jquery: "jQuery" } を追加します。ただし "jquery" ではなく、必ず "jQuery" と記述する必要があります。"jquery" だと正常に動作しませんでした。

動作確認

src/main/resources/static/vendor の下に node_modules/jquery/dist/jquery.min.js をコピーします。

src/main/resources/templates/web/inquiry/input01.html, input02.html を以下のように変更します。

<!-- REQUIRED JS SCRIPTS -->
<script src="/vendor/jquery.min.js"></script>
<script src="/js/inquiry/input01.js"></script>

</body>
</html>

• 各画面用の js ファイルの上に <script src="/vendor/jquery.min.js"></script> を追加します。

コマンドプロンプトを起動して npm run springboot コマンドを実行し、Tomcat も起動します。

http://localhost:9080/inquiry/input/01/ にアクセスすると入力画面１が表示されます。

「次へ」ボタンをクリックすると入力チェックのエラーメッセージが表示されます。Javascript の処理が問題なく動作していますね。

autokana も動作しており、またデータを全て入力すると入力チェックOKの状態になります。

「次へ」ボタンをクリックして入力画面２へ遷移した後、郵便番号を入力すると、ajax でデータを取得して autocomplete で住所の選択肢も表示されます。

動作も問題なさそうです。

履歴

2017/11/03
初版発行。