如何在 CDN 服务器上为 vanilla JavaScript 前端开发和生产构建捆绑 npm 包？

Question

我有一个使用 ES6 模块的普通 HTML/CSS/JavaScript 站点 (repository)。可以成功部署到 GitHub pages 和 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 页面等 CDN 上捆绑、构建和部署它们， Netlify 和 Vercel？

Answer 1

您需要做的是安装一个 javascript 捆绑器，它将所有需要的模块（例如 lodash）翻译并存储在一个可访问的位置以供您的浏览器查找。

观看this video，直截了当，总结一切。