現(xiàn)代瀏覽器對 ES（ECMAScript）模塊的原生支持是指瀏覽器可以直接解析和執(zhí)行 JavaScript 文件中的 ES 模塊語法，無需額外的工具或轉(zhuǎn)換。
具體來說，當瀏覽器遇到
import和export關鍵字時，會將其識別為 ES 模塊語法，而不是傳統(tǒng)的<script>標簽中的全局作用域。瀏覽器會根據(jù)import語句的路徑加載對應的模塊文件，并將導出的變量、函數(shù)或?qū)ο蟮冉壎ǖ疆斍澳K的作用域中，供其他模塊使用。ES 模塊的原生支持使得開發(fā)者可以更方便地組織和管理 JavaScript 代碼，避免了傳統(tǒng)的全局命名空間污染和腳本加載順序的問題。此外，ES 模塊還具有更好的靜態(tài)分析特性，使得瀏覽器可以更好地進行代碼優(yōu)化和加載性能的優(yōu)化。
需要注意的是，雖然現(xiàn)代瀏覽器已經(jīng)原生支持 ES 模塊，但對于一些舊版本的瀏覽器，特別是 Internet Explorer，可能不支持 ES 模塊或僅部分支持。因此，在開發(fā)時需要考慮瀏覽器的兼容性，并根據(jù)實際情況進行代碼轉(zhuǎn)換或提供備用方案。
我們在實際應用中只需要在? <script> ?標簽上加上一個 type="module" 就可以使用，參考這篇文章。
還需要注意，ES 模塊具有動態(tài)導入的能力，所以在代碼中引入 ES 模塊，可以動態(tài)的加載新的模塊。
知道了這個知識點，我們在看 vite 官網(wǎng)的時候就很好理解了。
瀏覽器為什么不支持 cjs
-
同步加載 vs. 異步加載： CommonJS 模塊是同步加載的，這意味著當一個模塊被引入時，會立即執(zhí)行并阻塞后續(xù)代碼的執(zhí)行，直到該模塊加載完成。而在瀏覽器中，更傾向于采用異步加載的模塊系統(tǒng)，以避免阻塞頁面渲染和用戶交互。
-
環(huán)境差異： 瀏覽器的運行環(huán)境和 Node.js 環(huán)境有很大的差異，包括文件系統(tǒng)、網(wǎng)絡訪問、全局對象等。CommonJS 在設計上與 Node.js 緊密集成，涉及了許多 Node.js 特有的功能和 API，這些在瀏覽器中并不存在，因此無法直接在瀏覽器中運行 CommonJS 模塊。
-
加載方式： 瀏覽器采用的是 HTTP 協(xié)議來加載資源，而 Node.js 則可以直接在本地文件系統(tǒng)中加載模塊。這導致了在瀏覽器環(huán)境下無法像在 Node.js 中那樣直接引入 CommonJS 模塊。文章來源：http://www.zghlxwxcb.cn/news/detail-854271.html
-
性能和安全性考量： CommonJS 的同步加載方式可能會導致性能問題，尤其是在大型的 Web 應用中。此外，CommonJS 的模塊系統(tǒng)設計上存在一些安全隱患，比如模塊的全局狀態(tài)共享等，這在瀏覽器環(huán)境下可能會引發(fā)一些問題。文章來源地址http://www.zghlxwxcb.cn/news/detail-854271.html
所以 node 支持 cjs ，瀏覽器不支持，所以在 esm 出來之前，webpack 回把?cjs 會打包成立即執(zhí)行函數(shù)給瀏覽器使用
到了這里，關于現(xiàn)代瀏覽器對 es模塊 【esm】原生支持/瀏覽器不支持cjs 的原因的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
