如何在 CDN 服務器上為 vanilla JavaScript 前端開發和生產構建捆綁 npm 包？

Question

我有一個使用 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 應用程序中：

^未捕獲的類型錯誤：無法解析模塊說明符“lodash”。 相對引用必須以“/”、“./”或“../”開頭。^

研究這個，我知道這樣的開發環境需要一個 web 捆綁器，但我發現了從過時的工具（如 Browserify 和 RequireJS）到過於復雜的工具（如 WebPack）到新的捆綁器（如 Parcel、Vite 和 Snowpack）似乎無法解決為開發和生產構建輕松捆綁 npm 包的問題。

在 2021/2022 年，在原生 HTML/CSS/JavaScript 前端應用程序中使用 lodash 等節點模塊的最直接方式是什么，以便可以在 GitHub 頁面、Netlify 和 Vercel 等 CDN 上捆綁、構建和部署它們？

Answer 1

您需要做的是安裝一個 javascript 捆綁器，它將所有需要的模塊（例如 lodash）翻譯並存儲在一個可訪問的位置以供您的瀏覽器查找。

觀看此視頻，直截了當並總結了一切。