ES6 モジュールを使用するバニラ HTML/CSS/JavaScript サイト (リポジトリ) があります。GitHub ページと Netlify に正常にデプロイできます。
私の HTML では、次のmain.jsようにインポートします。
<script src="js/main.js" type="module" defer></script>
私のmain.jsファイルでは、次のように作成した他のモジュールをインポートします。
import * as data from './data.js';
import displayUserCard from './displayUserCard.js';
自分のサイトで独自のコードを使用するのと同じように、自分のサイトで使用するnpm モジュールもインストールしてインポートしたいと考えています。
次のようにlodashをインストールします。
npm i lodash
次に、私のmain.jsファイルでは、Node アプリで行うのと同じように、lodash を次のようにインポートします。
import _ from 'lodash';
これはもちろん機能せず、Node アプリではなくブラウザーにいるため、次のエラーが表示されます。
^Uncaught TypeError: モジュール指定子 "lodash" の解決に失敗しました。相対参照は、"/"、"./"、または "../" のいずれかで始まる必要があります。^
これを調査すると、そのような開発環境には Web バンドラーが必要であることは理解できますが、Browserify や RequireJS などの時代遅れのツールから、WebPack などの複雑すぎるツール、Parcel、Vite、Snowpack などの新しいバンドラーまで、あらゆるものを見つけることができます。開発ビルドと本番ビルドの両方で npm パッケージを簡単にバンドルするというこの問題に対処していないようです。
2021/2022年に、標準のHTML / CSS / JavaScriptフロントエンドアプリでlodashなどのノードモジュールを使用して、GitHubページ、Netlify、VercelなどのCDNでバンドル、ビルド、デプロイできるようにする最も簡単な方法は何ですか?