如何捆绑 npm 包以在 CDN 服务器上进行普通 JavaScript 前端开发和生产构建？

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文件中，我像这样导入 lodash，就像我在 Node 应用程序中所做的那样：

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）并将其存储在浏览器可访问的位置以供您的浏览器查找。

观看这个视频，它开门见山，总结了一切。