我有一個使用 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檔案中，我像這樣匯入 lodash，就像我在我的 Node 應用程式中所做的那樣：
import _ from 'lodash';
這當然不起作用并給我以下錯誤，因為我們現在在瀏覽器中而不是在 Node 應用程式中：
^未捕獲的型別錯誤：無法決議模塊說明符“lodash”。相對參考必須以“/”、“./”或“../”開頭。^
研究這個，我明白這樣的開發環境需要一個 web 打包器，但我發現從過時的工具（如 Browserify 和 RequireJS）到過于復雜的工具（如 WebPack），再到較新的打包器（如 Parcel、Vite 和 Snowpack，它們都不需要）似乎沒有解決為開發和生產構建輕松捆綁 npm 包的問題。
在 2021/2022 年，在 vanilla HTML/CSS/JavaScript 前端應用程式中使用節點模塊（例如 lodash）以便它們可以在 GitHub 頁面、Netlify 和 Vercel 等 CDN 上捆綁、構建和部署的最直接方法是什么？
uj5u.com熱心網友回復：
您需要做的是安裝一個 javascript 打包器，它將所有需要的模塊（例如 lodash）翻譯并存盤在瀏覽器可訪問的位置。
觀看此視頻，它直截了當并總結了所有內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/395469.html
標籤：javascript 新产品经理 网路化 果酱栈
上一篇：增加nodejs中的記憶體限制
下一篇：如何基于os運行npm