如何在 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）翻译并存储在一个可访问的位置以供您的浏览器查找。

观看此视频，直截了当并总结了一切。