問題タブ [jamstack]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - CDN サーバー上でバニラ JavaScript フロントエンド開発および本番ビルド用の npm パッケージをバンドルする方法は?
ES6 モジュールを使用するバニラ HTML/CSS/JavaScript サイト (リポジトリ) があります。GitHub ページと Netlify に正常にデプロイできます。
私の HTML では、次のmain.jsようにインポートします。
私のmain.jsファイルでは、次のように作成した他のモジュールをインポートします。
自分のサイトで独自のコードを使用するのと同じように、自分のサイトで使用するnpm モジュールもインストールしてインポートしたいと考えています。
次のようにlodashをインストールします。
次に、私のmain.jsファイルでは、Node アプリで行うのと同じように、lodash を次のようにインポートします。
これはもちろん機能せず、Node アプリではなくブラウザーにいるため、次のエラーが表示されます。
^Uncaught TypeError: モジュール指定子 "lodash" の解決に失敗しました。相対参照は、"/"、"./"、または "../" のいずれかで始まる必要があります。^
これを調査すると、そのような開発環境には Web バンドラーが必要であることは理解できますが、Browserify や RequireJS などの時代遅れのツールから、WebPack などの複雑すぎるツール、Parcel、Vite、Snowpack などの新しいバンドラーまで、あらゆるものを見つけることができます。開発ビルドと本番ビルドの両方で npm パッケージを簡単にバンドルするというこの問題に対処していないようです。
2021/2022年に、標準のHTML / CSS / JavaScriptフロントエンドアプリでlodashなどのノードモジュールを使用して、GitHubページ、Netlify、VercelなどのCDNでバンドル、ビルド、デプロイできるようにする最も簡単な方法は何ですか?