沐鳴平台首頁_Webpack模塊化原理圖解

,

,這時模塊a,模板b中的代碼都暴露在全局環境中,如果模塊a中定義了一個方法del。同學b並不知道,在模塊b中也定義了一個方法del。這時便造成了命名衝突的的問題。如圖,模塊化的幾種實現方案,js”>
</script>
<script src=“b.js”>
</script>,webpack的模塊化原理,<script src=“util.js”>
</script>
<script src=“dialog.js”>
</script>
<scrpt src=“tab.js”>
</script>,webpack支持CommonJS,AMD,ESModule等多種模塊化方式的語法,模塊化的規範有很多種, 如下

| 規範 | 實現方案 |

| — | — |

| CommonJS | node.js |

| AMD | Require.js |

| CMD | Sea.js

| UMD | |

| ES6 Module | |,<script src=“util.js”>
</script>
<script src=“tab.js”>
</script>,C同學開發了一個公共的工具庫utils.js,D同學開發了一個公共的組件tab.js,tab.js依賴utils.js。同學E需要使用D同學開發的tab.js,就需要通過如下方式引用,同學E自己也開發了一個dailog.js同時它也依賴util.js。現在頁面同時引用了dialog.js和tab.js,代碼如下,同學E不僅需要同時引用這三個js文件,還必須保證文件之間的引用順序是正確的。同時,從上面的代碼我們無法直接看出模塊與模塊之間的依賴關係,如果不深入tab.js,我們無法知道tab.js到底是只依賴util.js還是dialog.js或者兩者都依賴。隨着項目逐漸增大,不同模塊之間的依賴關係則會變的越來越難以維護也會導致許多模塊中大量的變量都暴露在全局環境中。,