我有一个使用 ES6 模块的普通 HTML/CSS/JavaScript 站点(存储库)。可以成功部署到 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 应用程序中:
^未捕获的类型错误:无法解析模块说明符“lodash”。相对引用必须以“/”、“./”或“../”开头。^
研究这个,我知道这样的开发环境需要一个 web 捆绑器,但我发现从过时的工具(如 Browserify 和 RequireJS)到过于复杂的工具(如 WebPack),再到新的捆绑器(如 Parcel、Vite 和 Snowpack),这些工具都没有似乎无法解决为开发和生产构建轻松捆绑 npm 包的问题。
在 2021/2022 年,在原生 HTML/CSS/JavaScript 前端应用程序中使用 lodash 等节点模块的最直接方式是什么,以便可以在 GitHub pages、Netlify 和 Vercel 等 CDN 上捆绑、构建和部署它们?