Webpack4 ビルドするフロントエンド環境で jQuery に依存したライブラリを使う

バックエンドにPython3+bottle, フロントエンドにJavascript+jQueryを使って個人Webサービスを開発しています。
(いまだに jQuery なん? というツッコミは甘んじて総受けいたします…)

GUI を作り込んでいくにあたり、型安全の安心に包まれて開発したいので Typescript への移行を目論んでいます。
ついでに Javascript のモジュールの仕組もモダンな ES Modules を導入したかったので、ビルドツールとして Webpack4 を導入しました。

現在は <script> タグで多数の Javascript を読込み、グローバルな変数や関数が散在しているのを整理しながら、ES Modules 方式に直している所です。
jQuery を使用している箇所では、

import $ from 'jquery';

のように先頭に書いておけば、$("#code") のような書式はそのまま ES Module 環境でも動作します。

ところが、テキスト編集に jQuery-jeditable プラグインを使用していた箇所の修正でつまづいてしまいました。
このプラグイン自体は npm にあるのでインストール自体はすんなりできましたが、

> npm install --save-dev jquery-jeditable

実行中に jQuery が参照できない、というエラーが出てしいましました。ライブラリの中なので、↑の import 文を追記することもできません。(直接 node_modules ディレクトリ以下のソースを書き換える事はできますが、npm 管理に任せておきたいのでやりたくはありません)

結論としては、Qiita 記事「webpack 4 入門」Webpack4 公式サイト内の「ProvidePlugin | webpack」を参考に、以下のように webpack.config.js を修正することで解消しました。

module.exports = {
        :
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
        :
};

これにより、Webpack4 でビルドする全ての Javascript ファイルに対して、$, jQuery 双方の変数が使えるように効にできるため、node_modules 以下にある jQuery-jeditable からも参照できるようです。

…こんなんで悩むくらいなら「ヘイYou、Vue.js とか使っちゃいなYo!」ですか? そうですね、そう遠くない将来は私もそうしたいと考えています。(もくもく会でもいろんな方からこうしたアドバイスを頂きます…)
しかし、jQuery から Vue.js への移行というのは個人的に移行しづらい障壁があると思っています。

それは、移行する技術が2つあることです。1つはフレームワーク(ライブラリ)自身、もう1つはビルド環境です。
HTML から <script> タグで Javascript を読み込むだけだった牧歌的なあの頃から、Webpack4 を使ったモダンなビルド環境へ移行するのは自分にとって簡単ではありませんでした。(ビルドツールだけでも色々あるので、どれに移行すべきかも当初は見えていませんでした)

こうした状況では、開発経験が豊富なあなたならきっと内なる心のささやきが聞こえるはず。

「複数の技術を同時に移行しようとすると、路頭に迷う」

未知の用語や設定を見かけた時に、どちらの技術に由来するのかが不明なため、ドキュメントを読む手間が倍増します。
何かトラブルが起きた時に、どちらの技術に関わるものか、切り分けが困難になります。

多少なりともコード資産がある状況では、段階を踏んだ移行により心理的な安全を確保しながら進むのが大事だと思っています。