jQuery1系をWebpackerで流用した話

背景

新規開発プロジェクトにてデザインの一部を他アプリから流用したいリクエストがありました｡
そのアプリはjquery1系で動いていたため､そのまま流用しても後述の環境では動かず・・・｡
Chromeの開発者ツールによるデバッグで「$ is not defined」が頻発したりとだいぶハマったので備忘録として残します｡

局所的にjqueryを利用するため､アプリ内におけるグローバル化は実施しておりません｡

参考

以下の回答が大変参考になりました！

Webpackでjqueryなどが認識されない

環境

Rails: 6.0.2
Webpacker: 4.2.2
jQuery: 3.5.1
パッケージマネージャ: yarn

流用したコード(抜粋)

test.js

'use strict';

(function($){
  // 各処理
  var hoge = (function () {
    var $fuga = $('viewのclassまたはｉｄ属性')
    return{
      piyo: function () {
        // 取得したclass,id属性に対してjqueryで実現したい処理
      }
     }
  })();
  $(window).on('load', function(){
    // ページが読み込まれた時に実行するモジュール化された関数たち
    hoge.piyo();
  });

})(jQuery);

CDNによるjquery読み込み

test.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

修正したコード(抜粋)

test.js

'use strict';

import $ from 'jquery';

$(function(){
  // 各処理
  var hoge = (function () {
    var $fuga = $('viewのclassまたはｉｄ属性')
    return{
      piyo: function () {
        // 取得したclass,id属性に対してjqueryで実現したい処理
      }
     }
  })();

  $(window).on('load', function(){
    // ページが読み込まれた時に実行するモジュール化された関数たち
    hoge.piyo();
  });
  
});

webpackerによるjavascript読み込み

[webpacker管理対象ディレクトリ]/packs/app.js

import '../[任意のディレクトリ]/test.js';

test.html.slim(要件に従いslimを採用しております)

= javascript_pack_tag 'app'